VUE爬坑之数据更新视图未更新

这几天做的VUE项目遇到一个小坑,在这这里记录一下

• 1.项目是hybrid开发,使用的技术是MUI+VUE,在做一个列表渲染时,点击之后需要再次去渲染列表,发现数据已经更新,但是视图没有发生改变,通过VUE的官方网站可以知道,是因为VUE没有检测到数据的变化,解决方案:

// 使用数组方法splice
// vm  vue实例对象
// violationRuleList 数组
//searchResult.Count  新数组长度
vm.violationRuleList.splice(searchResult.Count); // 问题解决

• 2.其他解决方案

1.使用vue提供的set----this.$set('你要改变的数组','你要改变的位置(数组的索引),'要修改为什么值');

总结

可以被vue检测到的数组的方法
push()  // 数组末端添加数据
pop()// 删除数组最后一个元素
shift()// 删除数组的第一元素
unshift()// 将值添加在数组的最前面
splice()//数据的剪接
sort()//数组排序
reverse()//翻转数组
建议使用splice(),这个方法比较灵活:splice()方法详解
1.arr.splice(n);---只用一个参数的时候从索引为0的位置开始截取,返回该数组的前n项值
2.arr.splice(start,n);---从索引为start的位置开始,删除n个数组值,返回的是删除值后的数组结果
3.arr.splice(start,n,value);----将从索引位置开始到n个数组的值删除,在索引为start的位置数组的值替换为value,