VueJS How can I use computed property with v-for
computed-properties, javascript, vue.js
Solution
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 its 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.
Problem
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; }, }, }); ```