Uzbek Uzbek - 1 year ago 318
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">

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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download