vue通过$set更新数组

在Vue.js中，如果你想修改数组中的某个对象的属性值并确保视图能响应更新

我一开始是下面这样写。怎么都不生效。

data() {
  return {
    items: [
      { id: 1, name: 'Item 1' },
      { id: 2, name: 'Item 2' },
      // 更多对象...
    ]
  }
}

 this.$nextTick(() => {
        this.$set(this.items[index], 'name', 'New Name' );
        // 在这里进行其他相关更改
      })

只有改成浅拷贝的模式才能生效

const index = this.items.findIndex(item => item.id === 2);
if (index !== -1) {
  this.$set(this.items, index, { ...this.items[index], name: 'New Name' });
}

这里我们首先找到目标对象的索引，然后使用$set方法来设置整个对象的新值，新值是原对象的一个浅拷贝，并且包含了你要修改的那个属性的新值。