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

问题描述

对于我来说，我有多个对象的data数组

In my case, I have data array with multiple objects

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

}，

然后我想像下面那样将data中的每个对象推入内部

then I want to push inside each object in data like below

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

现在我将presetData推入data的情况看起来像这样

now my with presetData pushed into data will look like this

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

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

and I want to change individual time property of each object, which I use something like below

$set(item.time,selected,true)

我的问题

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

my issue is, this going to change both objects time property. How do I first push/set correctly presetData to data, below is my entire code , I'm sorry I'm very new to programming, here is the link to 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>

推荐答案

这是对象引用问题.您的每个time属性都引用相同的数组(presetData).您可以通过进行浅表复制来解决此问题.传播语法.

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.

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

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

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

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

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

这篇关于如何在数组中为多个对象设置一个属性，但在vue js中保留单独的反应性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！