在 Vue 中,一个数组在更新时,如果数组里的元素是数组或对象的话,需要注意数组或对象的引用关系。如果这些数组或对象被修改,但数组本身的引用没有发生变化的话,Vue
是不会检测到这些变化的,因为 Vue 只会对数据做浅层次的检测。
解决这个问题的方法之一是,通过 Vue 的 $set 或者 Vue.set 方法来触发数组的更新。这个方法会告诉 Vue,该数组需要被更新,从而可以正确地触发视图的更新。
假设我们有以下数据:
data: {
items: [
{id: 1, name: 'A', subItems: []},
{id: 2, name: 'B', subItems: []},
...
]
}
此时,如果我们想更新某个 subItems 数组里的元素,可以使用 $set 或者 Vue.set 方法,如下所示:
this.$set(this.items[index].subItems, subIndex, newValue);
总结:
对象更新: this.$set(对象,属性,更新的属性值)
数组更新: this.$set(数组,下标数,item更新的值)