需求：

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

问题：

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

测试流程：
（1）页面渲染出乱序的商品列表

％E5％9B％BE％E7％89％87

图片.png376x598 80.2 KB


（2）冒泡排序修改数组
％E5％9B％BE％E7％89％87
（3）打印出改变之后的数组
％E5％9B％BE％E7％89％87
（4）页面毫无变化

％E5％9B％BE％E7％89％87

图片.jpg379x598 86.4 KB

 

数组的数据格式如下：

[{'key1'：'value1'，'key2'：'value2'，'price'：num}，.......]

解决方案:

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

VUE文档中的原话：
％E5％9B％BE％E7％89％87

VUE文档中的解决方案：
％E5％9B％BE％E7％89％87

手动触发视图，这$ forceUpdate（）。

下面讲解vue.set()

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue