在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方法来设置整个对象的新值，新值是原对象的一个浅拷贝，并且包含了你要修改的那个属性的新值。
网友评论