如何 $set a 属性到数组中的多个对象但在 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 属性。我如何先 push/set 正确 presetData 到 data，下面是我的全部代码，对不起，我是编程新手，这里是 link 到 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)

如何 $set a 属性到数组中的多个对象但在 vue js 中保留单独的反应性

How to $set a property to multiple objects in an array but have retain individual reactivity in vue js

javascript

arrays

object

vuejs2

vue-reactivity

如何 $set a 属性 到数组中的多个对象但在 vue js 中保留单独的反应性

How to $set a property to multiple objects in an array but have retain individual reactivity in vue js

javascript

arrays

object

vuejs2

vue-reactivity

如何 $set a 属性到数组中的多个对象但在 vue js 中保留单独的反应性