There are multiple ways to solve your problem : You want to iterate on a template : You have to put a key on all elements in your template because you can not put a key on a template: <template> cannot be keyed. Place the key on real elements instead. <template v-for=”(project, index) in existingProjects”> … Read more
A simple v-if might work: <li v-for=”item in items” v-if=”item !== null” track-by=”id”> Give it a try. If not, do this: You can add a filter for that (in main.js before your App instance): Vue.filter(‘removeNullProps’, function(object) { return _.reject(object, (value) => value === null) }) then in the template: <li v-for=”item in items | removeNullProps” … Read more
Because arrays are mutable. The index of any given item can and will change if items are added to or removed from the array. You want your key to be a unique value identifying only your unique component. A primary key that you create is always better than using an index. Here is an example. … Read more
This is the way you solve it in browsers that support template. <table> <tbody> <template v-for=”item in items”> <tr></tr> <tr class=”detail-row”></tr> </template> </tbody> </table> If you need to support browsers that do not support template, I typically resort to a render function. Here is a working example of both. console.clear() new Vue({ el: “#app”, data: … Read more
You can use index (i) instead of value (n), it will start with 0: <div v-for=”(n, i) in 10″>{{ i }}</div> Output: 0 1 2 …
Why don’t use the power of Computed Properties ? computed: { infoOne: function () { return this.info.filter(i => i.col === ‘one’) }, infoTwo: function () { return this.info.filter(i => i.col === ‘two’) } } Then on each list just iterate over its respective property without the need to check. Example <ol> <li v-for=”item in infoOne”>{{item}}</li> … Read more
Here is one way. <span v-for=”(val,key,index) of person”> key: {{key}}, val: {{val}}, index: {{index}} <span v-if=”index != Object.keys(person).length – 1″>, </span> </span>
You can use an index in a range and then access the array via its index: <ul> <li v-for=”index in 10″ :key=”index”> {{ shoppingItems[index].name }} – {{ shoppingItems[index].price }} </li> </ul> Note that this is 1-indexed: in the first iteration, index is 1, and in the second iteration, index is 2, and so forth. You … Read more