Vue.js - How to implement Computed properties on objects of array?

Question

I have an array of objects inside my Vue instance, and for each item I'd like to write a Computed property.

Each object has only two properties: firstName and lastName. I would like to write a Computed property for each named 'fullName', which is just a concatenation of firstName and lastName.

I'm familiar with implementing Computed properties of data object properties of a Vue instances, but when it comes to doing so with elements of an array, I get confused.

Currently, my code is this:

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: {
    fullName: function(name) {
      return name.lastName + ', ' + name.firstName;
    }      
  }
  methods: {
    toggle: function(name) {
      name.done = !name.done;
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

And here is the respective jsFiddle

Try to reduce the number of function calls in your template. The function results are not cached, meaning that pretty much every change in data causes a full re-render. Using a computed, by creating an array of pre-computed objects can greatly improve your apps performance. See @Boussadjra's updated (2nd) example — Daniel
– Daniel, Commented Nov 20, 2018 at 16:31

Boussadjra Brahim · Accepted Answer · 2022-08-19 07:37:54Z

8

It's recommended to return a function with name as argument from the computed property :

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: {
     fullName(){
      return (name)=>name.lastName + ', ' + name.firstName;
    },
     toggle() {
       return (name)=>name.done = !name.done;
    }
  },
});

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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>

edited Aug 19, 2022 at 7:37

answered Nov 20, 2018 at 16:13

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Delfino Over a year ago

Seems that if having to loop through each name in names in a Computed property, it would be easier to set up a method.

Boussadjra Brahim Over a year ago

i added a second solution using computed property

Tomas Lucena Over a year ago

methods does not cache the result so it will be re-run every time the component or page render

Boussadjra Brahim Over a year ago

@TomasLucena thank you for your comment, I changed it to computed property that returns a function with name as parameter. At those early days I didn't know about this tip

Seb · Accepted Answer · 2018-11-20 16:17:05Z

4

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}`
  }
}

answered Nov 20, 2018 at 16:17

Seb

4322 gold badges4 silver badges17 bronze badges

Collectives™ on Stack Overflow

Vue.js - How to implement Computed properties on objects of array?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related