5-vue双向绑定的坑

158 阅读1分钟

问题出现场景

参考

例如一个el-table使用的data是一个从后台获取的数组,该数组在某些特定操作后会发生改变的时候,例如点击了一个按钮,会给该数组的每个元素新添加一个属性等情况的时候,会出现页面的数据不会出现实时更新的问题,而打印出来的data数据是已经存在该新属性。例如vm.items[indexOfItem] = newValue,vue不能监听到数组的变动。

原因:

vue内部存在的问题,vue的双向绑定只对在data上定义的状态进行监听,而数组的内部变化是vue无法监听的到的,更多请自行百度查看vue的双向绑定原理。

解决:

数组某个元素发生变化:

this.$set(this.items,indexOfItem,newValue);//对应的index发生变化

或者整个数组发生变化(简单粗暴)

this.$set(this,'vm',data.data)//vm为data上声明的数组