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

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以及视图的更新。

猜你喜欢

转载自blog.csdn.net/qq_35713752/article/details/132151356
今日推荐