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

问题描述

就我而言，我有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]
    },{
      name: "name 2",true]
    }
  ]

并且我想更改每个对象的单独time属性，我在下面使用类似的方法

$set(item.time,selected,true)

我的问题

我的问题是，这将更改两个对象的time属性。如何首先将presetData正确推入/设置为data，下面是我的整个代码，很抱歉，我对编程还很陌生，这是指向jsfiddle的链接>

    new Vue({
  el: "#app",data() {
    return {
      selected: 0,data: [
        {
          name: "name 1",},{
          name: "name 2",}
      ]
    };
  },methods: {
    setNewData() {
      this.data.forEach((o,i) => {
        this.$set(this.data[i],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,true)">Change True</button>
  <button @click="$set(item.time,false)">Change False</button>
</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）