需求:

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

问题:

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

测试流程:
(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()

相关文章:

  • 2022-12-23
  • 2021-06-20
  • 2022-12-23
  • 2021-04-02
  • 2021-08-08
  • 2022-12-23
  • 2022-12-23
  • 2021-12-04
猜你喜欢
  • 2023-03-24
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-09-08
相关资源
相似解决方案