【解决问题】uniapp、vue 中data 数组更新后页面不同步动态渲染更新

最新推荐文章于 2024-08-14 15:20:02 发布

crxk

最新推荐文章于 2024-08-14 15:20:02 发布

阅读量1.2w

点赞数 4

分类专栏：前端文章标签： javascript vue uniapp 数组更新

本文链接：https://blog.csdn.net/crxk_/article/details/107449261

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

业务场景

遍历数组，渲染页面，用户可以对食物类型与分量进行更改。实则就是对数组中对象的属性进行更改。然后在页面中及时渲染出来。

错误做法

直接对数据元素进行更改，伪代码如下

// 不能动态响应
this.photoArr[index].weight= 200;

这种修改方式确实把数据给更改成功了，在控制台也能够打印出更改后的值，但是页面不会同步更新。原因如下：

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

举个栗子

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

更多信息请看这里

正确做法

uniapp

// 直接更新数组某个元素的属性，视图上不会同步更新，要使用这种方式。
/**
 * @param photoArr 所要更新的数组
 * @param pIndex   所要更新的数组的哪一项
 * @param pItem    更新后的值
 */
that.$set(that.photoArr, pIndex, pItem);