VUE使用下标修改数组内的对象的属性值时，watch不触发问题解决

a_靖2023-08-08 12:52

vue官方中说明了侦听数组的改变方法，若是使用索引去改变数组的参数则不会触发vue的watch事件以及渲染。例如↓三种方式都是不会触发vue的监听以及渲染的。

1.通过索引直接设置数组的某个值，

this.objArr[index] = newValue;

2.通过索引直接设置数组中对象的某个属性，

this.objArr[index].pro = newValue;

3.通过修改数组的长度，

this.objArr.length = newLength;

解决方法

官方文档中说明了：

Vue 能够侦听响应式数组的变更方法，并在它们被调用时触发相关的更新。这些变更方法包括：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

举例1，数组的值的变化侦听

this.arr[index] = newValue;通过索引直接设置数组的某个值，是不会触发watch以及视图更新。

那我们就用他给的方法：splice（）

this.arr.splice(index,1,newValue)

//这样就会触发vue的watch以及视图的更新。

举例2，数组的对象的值的变化侦听

this.arr[index].val = newValue;通过索引直接设置数组的某个值，是不会触发watch以及视图更新。

那我们就用他给的方法：splice（）

修改数组arr指定下标的第一个对象的值。

this.arr.splice(index, 1, {
          'name': this.arr[index].name,
          'value': this.arr[index].value,
          'disable': !this.arr[index].disable
})

//这样就会触发vue的watch以及视图的更新。