如何为数组中的多个对象设置属性但在vue js中保留单独的反应性

Question

就我而言，我有 data 包含多个对象的数组

data() {
 return {
   selected: 0,
   presetData: [true, true, true],
   data: [
     {
       name: "name 1"
     },
     {
       name: "name 2"
     }
   ]
 };

},

然后我想推入data 中的每个对象，如下所示

setNewData() {
  this.data.forEach((o, i) => {
    this.$set(this.data[i], "time", this.presetData);
  });
},

现在我将presetData 推入data 将如下所示

data: [
    {
      name: "name 1",
      time: [true, true, true]
    },
    {
      name: "name 2",
      time: [true, true, true]
    }
  ]

我想更改每个对象的单个 time 属性，我使用如下所示的内容

$set(item.time,selected,true)

我的问题

我的问题是，这将改变两个对象 time 属性。如何首先正确地将presetData 推送/设置为data，下面是我的全部代码，对不起，我对编程很陌生，这是jsfiddle 的链接

    new Vue({
  el: "#app",
  data() {
    return {
      selected: 0,
      presetData: [true, true, true],
      data: [
        {
          name: "name 1",
        },
        {
          name: "name 2",
        }
      ]
    };
  },
  methods: {
    setNewData() {
      this.data.forEach((o, i) => {
        this.$set(this.data[i], "time", this.presetData);
      });
    },
  }
})

  <div id="app">
<button @click="setNewData">Set Data</button>
<br>
<br>
<select v-model="selected">
  <option>0</option>
  <option>1</option>
  <option>2</option>
</select>
<div v-for="item in data" :key="item.id">
  <p>{{item.name}}</p>
  <p>{{item.time}}</p>
  <button @click="$set(item.time,selected,true)">Change True</button>
  <button @click="$set(item.time,selected,false)">Change False</button>
</div>

Answer 1

这是一个对象引用问题。您的每个 time 属性都引用同一个数组 (presetData)。你可以通过spread syntax进行浅拷贝来解决这个问题。

您也可以在使用相同的技术分配新的data 时避免Vue.set()

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
  }))
},

要更改time 属性中的单个数组元素，您需要继续使用Vue.set()，即

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