如何将属性设置为数组中的多个对象，但在 vue js 中保留单独的反应性 [英] How to $set a property to multiple objects in an array but have retain individual reactivity in vue js

问题描述

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

data() {返回 {选择: 0,预设数据:[真，真，真]，数据: [{名称:名称 1"},{名称:名称 2"}]};

},

然后我想将 data 中的每个对象推入如下

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

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

数据:[{名称:名称 1"，时间:[真，真，真]},{名称:名称 2"，时间:[真，真，真]}]

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

$set(item.time,selected,true)

我的问题

我的问题是，这将改变两个对象的 time 属性.我如何首先将 presetData 正确推送/设置为 data，下面是我的完整代码，对不起，我对编程很陌生，这里是 presetData 的链接a href="https://jsfiddle.net/ALENG/4Lo8swjc/2/" rel="nofollow noreferrer">jsfiddle

 new Vue({el:#app"，数据() {返回 {选择: 0,预设数据:[真，真，真]，数据: [{名称:名称 1"，},{名称:名称 2"，}]};},方法: {设置新数据(){this.data.forEach((o, i) => {this.$set(this.data[i], time", this.presetData);});},}})<div id="应用程序"><button @click="setNewData">设置数据</button><br><br><select v-model="selected"><option>0</option><选项>1</选项><option>2</option></选择><div v-for=数据中的项目":key="item.id"><p>{{item.name}}</p><p>{{item.time}}</p><button @click="$set(item.time,selected,true)">改变真</button><button @click=$set(item.time,selected,false)">更改 False</button>

解决方案

这是一个对象引用问题.您的每个 time 属性都引用相同的数组 (presetData).您可以通过 制作浅拷贝来解决这个问题展开语法.

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

setNewData() {this.data = this.data.map(d => ({...d,//创建每个数据项的浅拷贝时间:[...this.presetData]//添加时间"；作为presetData的浅拷贝}))},

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

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

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"
     }
   ]
 };

},

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

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]
    }
  ]

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

$set(item.time,selected,true)

My Issue

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>

解决方案

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.

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

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 中保留单独的反应性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！