Vue.js - How to implement Computed properties on objects of array?
You could use fullname as method instead of computed property in your case :
var app = new Vue({ el: '#app', data: { names: [{ firstName: 'Mike', lastName: 'McDonald', done: false }, { firstName: 'Alex', lastName: 'Nemeth', done: false }, { firstName: 'Nate', lastName: 'Kostansek', done: true }, { firstName: 'Ivan', lastName: 'Wyrsta', done: true } ] }, computed: { }, methods: { fullName: function(name) { return name.lastName + ', ' + name.firstName; }, toggle: function(name) { name.done = !name.done; } }});<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script><div id='app'> <ol> <li v-for='name in names'> <input type='checkbox' v-bind:checked='name.done' v-on:change='toggle(name)' /> <span v-if='!name.done'>{{ fullName(name) }}</span> <del v-else>{{ fullName(name) }}</del> </li> </ol></div>Another solution is to loop through names array inside a computed property by concatenating firstname and lastname, after that return this array and loop through it in your template
var app = new Vue({ el: '#app', data: { names: [{ firstName: 'Mike', lastName: 'McDonald', done: false }, { firstName: 'Alex', lastName: 'Nemeth', done: false }, { firstName: 'Nate', lastName: 'Kostansek', done: true }, { firstName: 'Ivan', lastName: 'Wyrsta', done: true } ] }, computed: { fullNames() { return this.names.map(name => { let fl = {}; fl.fname = name.firstName + ", " + name.lastName; fl.done = name.done; return fl; }) } }, methods: { fullName: function(name) { return name.lastName + ', ' + name.firstName; }, toggle: function(name) { name.done = !name.done; } }});<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script><div id='app'> <ol> <li v-for='name in fullNames'> <input type='checkbox' v-bind:checked='name.done' v-on:change='toggle(name)' /> <span v-if='!name.done'>{{ name.fname }}</span> <del v-else>{{ name.fname }}</del> </li> </ol></div>
You can't use the 'computed' with a parameter.Most probably you want to use a method:
example
<span>{{ fullName('Hi') }}</span>methods: { fullName(param) { return `${this.param} ${this.firstName} ${this.lastName}` }}