Vue 更改数组中的对象并触发反应性

Question

如何在更改数组中按索引找到的对象的一部分时触发更新？

文档展示了如何改变数组的值：

Vue.set(example1.items, indexOfItem, newValue)

或

example1.items.splice(indexOfItem, 1, newValue)

但是如何在不改变对象其余部分的情况下改变数组中对象的属性值呢？

下面的工作是更新属性，但是 Vue 不会对更改做出反应，直到其他东西触发更新。

example1.items[indexOfItem].some_object_property = false

Answer 1

您可以用 this.$set() 更新数组元素中的子属性。例如，要在前两个数组元素中增加一个 x sub属性（如果不存在则创建 sub-属性）：

methods: {
  update() {
    this.$set(this.arr[0].foo, 'x', (this.arr[0].foo.x || 0) + 100)
    this.$set(this.arr[1].foo, 'x', (this.arr[1].foo.x || 0) + 100)
  }
}

new Vue({
  el: '#app',
  data() {
    return {
      arr: [
        {
          foo: {
            x: 100,
            y: 200
          }
        },
        {
          foo: {
            /* x does not exist here initially */
            y: 400
          }
        }
      ]
    };
  },

  methods: {
    update() {
      this.$set(this.arr[0].foo, 'x', (this.arr[0].foo.x || 0) + 100)
      this.$set(this.arr[1].foo, 'x', (this.arr[1].foo.x || 0) + 100)
    }
  }
})

<script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>

<div id="app">
  <button @click="update">Update</button>
  <p>arr[0]: {{ arr[0] }}</p>
  <p>arr[1]: {{ arr[1] }}</p>
</div>

codepen

Answer 2

只要你调用一次set()来设置数组中的对象（带有你要更新的属性），Vue就会对对象属性的变化做出反应。下面是一个示例，其中一个对象数组在我们的应用程序数据中初始化，另一个对象数组在安装时手动设置（使用 Vue.set()）。单击该按钮会在每个数组中的一个对象上更新属性，Vue 会做出反应。请注意，发生在 mount() 中的 set() 调用实际上可能随时发生。

https://codepen.io/jordan-kalosal/pen/VrwjoR

new Vue({
  el: "#app",
  data: {
    arr: [
      {
        property: 'OBJ1 Prop'
      },
      {
        property: 'OBJ2 Prop'
      }
    ],
    setLater: false
  },
  mounted() {
    this.$set(this, 'setLater', [
      {
        property: 'setLater OBJ1 Prop'
      },
      {
        property: 'setLater OBJ2 Prop'
      }
    ])
  },
  methods: {
    _updateObjProps() {
      this.arr[0].property = (new Date()).toString();
      this.setLater[0].property = (new Date()).toString();
    }
  }
})

Answer 3

这是另一个演示示例，我认为它很好地说明了数组内对象的反应性。在这里现场试用：https://codepen.io/antoniandre/pen/ZdjwKG

JS

new Vue({
  el: "#app",
  data: {
    array: []
  },

  methods: {
    addTimeProp() {
      this.array.forEach(item => {
        this.$set(item, 'time', null)
      })
    },
    updateTimeProp() {
      this.array.forEach(item => {
        item.time = (new Date()).toString()
      })
    }
  },

  created () {
    this.array.push({ name: 'today' }, { name: 'tomorrow' })
  }
})

HTML: 哈巴狗

#app
  h1 Reactivity of objects inside an array
  h2 Content of the array
  pre {{ array }}
  button(@click="array.push({ name: 'another day' })") Add another object
  button(@click="addTimeProp") Add `time` property
  button(@click="updateTimeProp") Update `time` property

Answer 4

如果你不创建任何新的，你也可以这样做属性:

this.myArray.find( el => el.id === '123').someValue = 'someValue'

数组中的对象是完全反应性的。

Vue 更改数组中的对象并触发反应性

Vue change object in array and trigger reactivity

vue.js

vuejs2

reactive