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

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属性(property)。我如何首先正确推送/设置 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 properties 引用相同的数组 ( presetData )。您可以通过 spread syntax 制作浅拷贝来解决这个问题。 .
您也可以避免 Vue.set()分配新时 data使用相同的技术

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() ， IE

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