vue2.x数组的响应式

vue2.x数组的响应式

在vue2中直接去修改数组中元素的值,视图是不会更新的,如下
data中有一个数组 为 arr : [
{
name: “张三”,
age: 20,
},
{
name: “李四”,
age: 18,
}
]
如果你是这样更新数据的->
this.arr[0].name = “王五”;
this.arr[1].age = 22;
修改长度也是无法触发视图更新的
this.arr.length = 3;
那么视图上是不会发生改变的,显示的还是张三,与18。
那么怎么让它触发视图更新,使其具有响应式呢,我们可以通过 s e t 去 更 新 , 如 下 : t h i s . set去更新,如下: this. setthis.set(arr[0],“name”,“王五”)
this.$set(arr[1],“age”,18)
这样就可以了

如果你的数组是这样的
arr = [ “张三”,“李四”,“王五”,20,18,22 ]
那么久如此去更新
this.$set(arr,2,“大壮”)
李四是就被改为了大壮,视图也更新了
第一个参数是要更新的数组或者对象,第二个参数是数组的索引(下标)或者是对象的属性名称,第三个是修改的值。

你可能感兴趣的