How to add a property to ALL objects in an array (data) using Vue.js?

Question

Background: I have an array in data() that gets populated with objects from the backend. If the GET request retrieves 6 objects those 6 objects will update in the array.

Problem: I already understand vm.$set is needed to add properties to an object. But how do add properties to all object in the array?

I want to change:

 data() {
    return {
      expenseButton: [{key:value},{key:value},{key:value}]
         };
  }

to

data() {
    return {
      expenseButton: [{key:value, key2:value2},{key:value, key2:value2},{key:value, key2:value2}]
         };
  }

Failed attempt which logs newValue as a property in the array instead of each object

  methods: {
    check() {
      this.$set(this.expenseButton, "newValue", this.expenseButton.newValue);
      console.log(this.expenseButton);
    }
  },

UPDATE How to target all objects in an array via vm.$set so that all objects has a new property called "newValue"

 data() {
    return {
      expenseButton: [{key1:value1},{key2:value2},{key3:value3}]
         };
  }

TO

 data() {
    return {
      expenseButton: [{key1:value1,newValue: ''},{key2:value2, newValue: ''},{key3:value3, newValue: ''}]
         };
  }

Use splice on the array or modify the array then replace it. — Cue
– Cue, Commented May 25, 2020 at 22:01

Cue · Accepted Answer · 2020-05-26 00:02:01Z

5

You can use $set on arrays by passing the index at which you wish to set a new value.

However, since you're adding a new property to each item in the array, you could just map over the array items, add the property and replace the data item altogether which would be far more efficient.

check() {
  this.expenseButton = this.expenseButton.map((obj) => {
    obj.newValue = ''
    return obj
  })
}

To retain reactivity, you will need to invoke $set on each index with the corresponding key-value pair. See @blex's answer for reference.

check() {
  this.expenseButton.forEach((_, index) => {
    this.$set(this.expenseButton[index], 'newValue', '')
  })
}

If the above resolves your question, please accept @blex’s answer as your accepted solution.

edited May 26, 2020 at 0:02

answered May 25, 2020 at 22:07

Cue

2,7591 gold badge14 silver badges14 bronze badges

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

7 Comments

blex Over a year ago

Yes, but now, key2 is not reactive. Changes to it won't be detected

Cue Over a year ago

That's correct, though that is not the intended question and the OP needs to evaluate and discover this for themselves.

Eddie Weldon Over a year ago

@Cue. "newValue" is not intended to replace the value of "key2". But it is intended to be a third key/value pair like this: {key:value, key2:value2, newValue: ' ' }.

Cue Over a year ago

@EddieWeldon sure, just replace obj.key2 with obj.newValue.

Eddie Weldon Over a year ago

@blex You are right it is not reactive. I am trying to add "newValue" using vm.$set feature.

|

blex · Accepted Answer · 2020-05-25 22:07:09Z

3

You could use this.$set in a loop:

Vue.component('my-component', {
  template: '#my-component',
  data() {
    return {
      expenseButton: [{ key: 0 }, { key: 1 }, { key: 2 }]
    };
  },
  methods: {
    check() {
      this.expenseButton.forEach((o, i) => {
        this.$set(this.expenseButton[i], "key2", i * 2);
      });
    }
  }
});

var vm = new Vue({
  el: '#app'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.min.js"></script>

<div id="app">
  <my-component></my-component>
</div>

<template id="my-component">
  <div>
    <ul>
      <li v-for="x in expenseButton" :key="x.key">
       {{x}}
      </li>
    </ul>
    <button @click="check">Update items</button>
  </div>
</template>

answered May 25, 2020 at 22:07

blex

25.7k6 gold badges48 silver badges78 bronze badges

2 Comments

Eddie Weldon Over a year ago

Appreciate it man! I there a explicit reason to break it into a seperate component

blex Over a year ago

No, that's just for the demo

Collectives™ on Stack Overflow

How to add a property to ALL objects in an array (data) using Vue.js?

2 Answers 2

7 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related