Uzbek Uzbek - 1 month ago 37
Javascript Question

VueJS How can i use computed property with v-for

How can i use computed property in lists. I am using VueJS v2.0.2.

Here's the HTML:

<div id="el">
<p v-for="item in items">
<span>{{fullName}}</span>
</p>
</div>


Here's the Vue code:

var items = [
{ id:1, firstname:'John', lastname: 'Doe' },
{ id:2, firstname:'Martin', lastname: 'Bust' }
];

var vm = new Vue({
el: '#el',
data: { items: items },
computed: {
fullName: function(item) {
return item.firstname + ' ' + item.lastname;
},
},
});

Answer

You can't create a computed property for each iteration. Ideally, each of those items would be their own component so each one can have it's own fullName computed property.

What you can do, if you don't want to create a user component, is use a method instead. You can move fullName right from the computed property to methods, then you can use it like:

{{ fullName(user) }}

Also, side note, if you find yourself needing to pass an arguments to a computed you likely want a method instead.