How use v-if with array length - vue.js

I want to show a div if the array length is more than 0. I used it below.
HTML:
<div v-if="countfunc > 0">
<div v-for="nhp in countfunc">
<p v-text="nhp.code"></p>
</div>
</div>
Vue:
computed: {
countfunc: function(){
//this return a js array
}
}
How can I solve my problem?

You can use it as countfunc.length>0

The thing is, if countfunc is an empty array it will not show anything anyway, so this double check is a little bit unnecessary. Of course in your code you're forgetting the :key property in v-for as well.
Here you can try on codepen, try to delete the object inside the array and let it empty like
<script>
export default {
data() {
return {
items: [],
};
},
};
</script>
And you can see that not will be rendered since the array is empty.

Related

Vue.js this.$refs empty due to v-if

I have a simple Vue component that displays an address, but converts into a form to edit the address if the user clicks a button. The address field is an autocomplete using Google Maps API. Because the field is hidden (actually nonexistent) half the time, I have to re-instantiate the autocomplete each time the field is shown.
<template>
<div>
<div v-if="editing">
<div><input ref="autocomplete" v-model="address"></div>
<button #click="save">Save</button>
</div>
<div v-else>
<p>{{ address }}</p>
<button #click="edit">Edit</button>
</div>
</div>
</template>
<script>
export default {
data() {
editing: false,
address: ""
},
methods: {
edit() {
this.editing = true;
this.initAutocomplete();
},
save() {
this.editing = false;
}
initAutocomplete() {
this.autocomplete = new google.maps.places.Autocomplete(this.$refs.autocomplete, {});
}
},
mounted() {
this.initAutocomplete();
}
}
I was getting errors that the autocomplete reference was not a valid HTMLInputElement, and when I did console.log(this.$refs) it only produced {} even though the input field was clearly present on screen. I then realized it was trying to reference a nonexistent field, so I then tried to confine the autocomplete init to only when the input field should be visible via v-if. Even with this, initAutocomplete() is still giving errors trying to reference a nonexistent field.
How can I ensure that the reference exists first?
Maybe a solution would be to use $nextTick which will wait for your DOM to rerender.
So your code would look like :
edit() {
this.editing = true;
this.$nextTick(() => { this.initAutocomplete(); });
},
Moreover if you try to use your this.initAutocomplete(); during mounting it cannot work since the $refs.autocomplete is not existing yet but I'm not sure you need it since your v-model is already empty.
I think it's because your "refs" is plural
<input refs="autocomplete" v-model="address">
It should be:
<input ref="autocomplete" v-model="address">

Dynamic rendering of images with v-for?

I want to render images from a local folder with v-for, but how to make it 100% dynamic?
I tried the solutions offered in this thread. When I tried the most useful solution, I just get a blank page, unless I fill the array with the name of the images.
<template>
<div class="comp__cardroster">
<div class="container__cards" >
<div v-for="image in images" :key="image" class="tile--outer">
<img class="tile--inner" :src="selectImage(image)" :alt="image"></div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
images: []
}
}
methods: {
selectImage(image) {
return require('#/assets/card-images/' + image + ".jpg")
}
}
}
</script>
The code above gives me a blank page. But when I fill the array with values, like below, I do get a result. But I don't want this obviously.
data() {
return {
images: [1,2,3,4,5,6,7,8,9,10]
}
}
I would want the code to render the images dynamically, no matter how many images I do have in my "assets/card-images" folder and without having to manually add values in the array each time I add a new image to the folder.
What am I doing wrong? I thank you for any advise.
UPDATE
Things I tried;
moving the "images" array from data to computed
moving "selectImage" method from methods to computed
moving both "images" array and "selectImage" method into computed
Either I get a blank page, or I get the same result as before
I don't think I was clear enough with my comments, so I'll explain what I meant with an example; you should be able to apply this to your use case with minimal effort. My src file structure and a screenshot of the result are also at the bottom of this answer.
The template I've made is basically the same as yours (without the extra divs with classes):
<template>
<div>
<div v-for="image in images" :key="image">
<img :src="selectImage(image)" :alt="image" />
</div>
</div>
</template>
Here's my script. I'll go through it all below:
<script>
export default {
name: 'app',
computed: {
images: function() {
const x = require.context('#/assets/card-images/', true, /\.png$/)
return this.importAll(x)
}
},
methods: {
importAll(r) {
return r.keys().map(x =>
x.substring(2, x.length) // remove "./" from file names
)
},
selectImage(image) {
return require('#/assets/card-images/' + image)
}
}
}
</script>
computed
The computed section is where you define your dynamically generated or computed values. Since you want your images to be dynamically generated, I've made images a computed function (can probably just be a value, you can play around with that).
All that images does is it uses require.context to get a list of all of the .png images in my #/assets/card-images/ folder, and trims the first couple of characters from them.
methods
importAll just retrieves and trims the image names. I've done this because otherwise, it'll think the images are at #/assets/card-images/./xxxxx.png - there's probably a better way of doing this but it works well enough.
selectImage gets an image from the file name you pass in (if it exists). If the image name doesn't exist, this will break but that shouldn't happen with how this is implemented.
Note: You can technically shorten the v-for loop by putting it directly on the img tag if you really want to, though I'd argue this is less readable:
<template>
<div>
<img v-for="image in images"
:key="image"
:src="selectImage(image)"
:alt="image" />
</div>
</template>
Here is my src folder structure. It doesn't matter what the images are called, as long as they have the same extension as you're using in your script tag:
Here is what the code prints out (all of the images are just copies of the Vue logo):
EDIT
If you want to keep your initial images array, you can move the computed stuff into the lifecycle method mounted or created (depending on your use-case). Read more about lifecycle methods here or here. Here's what my component would look like with the calculations in mounted:
<template>
<div>
<div v-for="image in images" :key="image">
<img :src="selectImage(image)" :alt="image" />
</div>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
images: []
}
},
mounted() {
const x = require.context('#/assets/card-images/', true, /\.png$/)
this.images = this.importAll(x)
},
methods: {
importAll(r) {
return r.keys().map(x =>
x.substring(2, x.length) // remove "./" from file names
)
},
selectImage(image) {
return require('#/assets/card-images/' + image)
}
}
}
</script>
Use a requireAll method to get an array, and your count. Or a custom loader.
How to load all files in a directory using webpack without require statements
node.js require all files in a folder?

How do I insert object created with document.createElement into template?

I like to know how I can insert a Element that has already been created with the document.createElement method into the template. I am not sure how to proceed here because eventually I would also like to bind the contents of that particular textBox. Here is the (non working) code that I have up till now to illustrate what I like to do:
<template>
<div>
<p id="status">{{ statusMessage }}</p>
<div id="output" v-html="textBox"></div>
</div>
</template>
<script>
export default {
name: 'Result',
data() {
return {
statusMessage: "Status",
textBox: Object,
}
},
mounted() {
this.textBox = this.$someModule.createTextBox()
console.log('textBox should become: '+this.textBox)
// Shows: textbox should become: [object HTMLTextAreaElement]
},
...
}
First of all, v-html is a directive that allow you to use raw html text.
ref: https://v2.vuejs.org/v2/guide/syntax.html#Raw-HTML
Second of all, you can you a ref directive to create a link to you element (ref="someName"):
<div id="output" ref="textBox"></div>
Then:
const el = this.$refs.textBox;
el.appendChild('entity which you want to append');

return elements from a vuejs method

I'm a bit new to vuejs and I'm not even sure what exactly am I looking for,
I have this template:
<template>
<md-content class="md-elevation-2">
<div class="md-layout">
<div class="md-layout-item" v-for="key in ruleData">
{{ getKeyOutput(key) }}
</div>
</div>
</md-content>
</template>
and my script is:
<script>
export default {
props: ['ruleData'],
methods: {
getKeyOutput(value) {
switch (typeof value) {
case 'string':
if (/(ban)$/g.test(value)) {
return createElement(`<h1>${ value }</h1>`) // here is the problem
} else {
return value
}
break
case 'number':
return String(value)
break
case 'boolean':
return String(value)
break
default:
return value
break
}
}
}
}
</script>
What I want to do is on some case return the string, and in some other cases like return an HTML component like h1 for example, and I can't seem to understand how I need to do this, or even if I have the correct approach for this.
You have to use v-html directive to render html tags that is stored as a string.
if you don't use v-html then vuejs by default escapes the html tags and therefore the html tags are displayed as a plain text. You don't need to use createElement() at anyplace in your code, just remove it.
Change your vue template code as below and verify if you are getting the expected result
<div
class="md-layout-item"
v-for="(value,key) in ruleData"
:key="key"
v-html="getKeyOutput(value)">
</div>
You don't need to use createElement() anymore, just return the html code as a string or template string
if (/(ban)$/g.test(value)) {
return `<h1>${ value }</h1>`; //problem solved
} else {
return value
}
Read More details about v-html in the docs https://v2.vuejs.org/v2/guide/syntax.html#Raw-HTML

Vue v-once equivalent

Is there a way to tell Vue to call a method only once when used as an expression?
Here's my code:
<div v-for="i in a.b.c.items">
<div :id="foo(i.value)"></div>
</div>
The way it is now, the foo() method will be executed any time anything on the model changes, not only items. Is there something in Vue that I can tell to evaluate this only once?
like this: <div :id.only-once="foo(i.value)"
Unfortunately that's only possible for certain events, e.g. in this question here. What you may want to consider instead is a computed property where you compute all of these values and return the array. This resulting array will be cached by Vue and will not be reevaluated until your items array is modified (and modified in such a way that Vue will detect the change).
An example:
Vue Setup
<script>
new Vue({
el: '. . .',
data: {
a: {b: {c: {items: [. . .]}}}
},
methods: {
foo: function(val) {
. . .
}
},
computed: {
itemsAfterFoo: function() {
var this_vue_instance = this;
var computed_items = [];
this_vue_instance.items.forEach(function(item) {
computed_items.push(this_vue_instance.foo(item.value));
});
return computed_items;
}
}
});
</script>
Template
<div v-for="(i, index) in a.b.c.items">
<div :id="itemsAfterFoo[index]"></div>
</div>
Or something to that effect.
More information on computed properties here: https://v2.vuejs.org/v2/guide/computed.html