Vue的修改数据页面不重新渲染

需求:

通过一个数组渲染出商品列表,现在我通过价格对数组内的商品进行排序,希望改变数组后重新渲染商品列表。

问题:

数组改变之后并没有重新渲染。

测试流程:
(1)页面渲染出乱序的商品列表

Vue的修改数据页面不重新渲染

图片.png376x598 80.2 KB


(2)冒泡排序修改数组
Vue的修改数据页面不重新渲染
(3)打印出改变之后的数组
Vue的修改数据页面不重新渲染
(4)页面毫无变化

Vue的修改数据页面不重新渲染

图片.jpg379x598 86.4 KB

 

数组的数据格式如下:

[{'key1':'value1','key2':'value2','price':num},.......]

解决方案:

通过修改数组下标的方式是不会触发改动的,你要手动触发.

VUE文档中的原话:
Vue的修改数据页面不重新渲染

VUE文档中的解决方案:
Vue的修改数据页面不重新渲染

手动触发视图,这$ forceUpdate()。

下面讲解vue.set()