vue.js - Vue 更改数组中的对象并触发 react 性

Question

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

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

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

或

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

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

以下内容用于更新属性，但 Vue 不会对更改使用react，直到其他内容触发更新。

example1.items[indexOfItem].some_object_property = false

Answer 1

您可以使用 this.$set() 更新数组元素中的子属性.例如，要在前两个数组元素中递增 x 子属性(如果不存在则创建子属性):

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