How To $set A Property To Multiple Objects In An Array But Have Retain Individual Reactivity In Vue Js

In my case, I have data array with multiple objects data() { return { selected: 0, presetData: [true, true, true], data: [ { name: 'name 1' }, {

Solution 1:

This is an object reference issue. Each of your time properties references the same array (presetData). You can break out of this problem by making shallow copies via spread syntax.

You can also avoid Vue.set() when assigning new data using the same technique

setNewData() {
  this.data = this.data.map(d => ({
    ...d, // create a shallow copy of each data item
    time: [...this.presetData] // add "time" as a shallow copy of presetData
  }))
},

To change individual array elements within the time property, you need to continue using Vue.set(), ie

this.$set(item.time, selected, true)