前言:因为项目需要单独修改表格中某一行(条)数据,不刷新整个表格(表格用的是element-ui的table组件)。
遇到的困难:最开始是直接用数组索引来修改this.tableData[index] = newVal
,然后发现数据(tableData)是修改了,但是界面上没有响应,即双向绑定失效了,想了很多办法,绑定row-key、使用this.$forceUpdate()强行更新界面都不行(虽然不建议使用this.$forceUpdate()),直接给table组件绑定key来更新是可以的,但是这样直接更新了整改table组件,不优雅,而且每次表格都会默认滑到顶部。
原因:vue2的文档中明确地写了:由于 JavaScript 的限制,Vue 不能检测数组和对象的变化。尽管如此我们还是有一些办法来回避这些限制并保证它们的响应性。
以下是官网中的例子
对于对象
1 | //Vue 不能检测以下数组的变动: |
对于数组
1 | var vm = new Vue({ |
出现上述问题的原因是vue的响应式原理,vue响应式是将遍历此对象所有的 property,并使用 Object.defineProperty 把这些 property 全部转为 getter/setter,在上诉对象中vm.a是被添加了getter/setter方法,但是vm.b并没有被添加,而数组items也是被添加了getter/setter方法,但是修改items内部某个索引对应的值时,items的引用并没有被改变,因此并没有触发items的setter,因此双向绑定失败。
解决方式
vue在文档中已经给出了处理这种双向绑定失效的方法,即Vue.set( target, propertyName/index, value )
1 | Vue.set( target, propertyName/index, value ) |