以下代码为echart所实现的一个图表,对其新增了一个排序功能,采用冒泡排序思想,对每一项进行排序,我们对数组进行变动,在控制台可以看到数组已经发生变动,但是页面的数据显示还是未发生改变,查了下原因是由于JS的限制,vue不能检测到变动的数组,需要使用vue.set()方法实现视图更新。

vue数组渲染问题

vue数组渲染问题 vue数组渲染问题

总结:

v-for循环渲染数组数据时,数据更新了,视图却没有更新

  由于 JavaScript 的限制, Vue 不能检测以下变动的数组:
    1. 当你利用索引直接设置一个项时,例如: vm.items[indexOfItem] = newValue
    2. 当你修改数组的长度时,例如: vm.items.length = newLength

解决方法:

 为了避免第一种情况,以下两种方式将达到像 vm.items[indexOfItem] = newValue 的效果, 同时也将触发状态更新: 

(1) Vue.set

Vue.set(example1.items, indexOfItem, newValue) (数组, 所引, 值)

(2) Array.prototype.splice

example1.items.splice(indexOfItem, 1, newValue) (所引, 长度, 值)

  为了避免第二种情况,使用 splice

example1.items.splice(newLength)

相关文章: