Alcantara
Alcantara
  • 发布:2019-08-27 14:45
  • 更新:2021-04-16 10:37
  • 阅读:9985

【报Bug】uni-app,修改数组,视图不更新

分类:uni-app

详细问题描述

重现步骤

[步骤]

  1. data中的数组修改后,视图中v-for渲染不能更新,例如this.$set(this.arr, 1, {foo: 'bar'})或者this.arr = [{foo: 1'}, {baz: 2}]都能触发视图更新。
  2. 如果同时改变data中的一个其它基本类型数据,例如this.flag = !this.flag,视图就能更新

[结果]
直接修改数组,视图不能更新;
如果同时修改其它一个基本类型数据,数组对应的相关视图能更新。

[期望]
修改数组(不包括直接修改索引对应的值、修改数组长度),对应视图更新。

IDE运行环境说明

  • vscode v1.37
  • windows10

uni-app运行环境说明

  • 本地静态页面开发
  • 微信开发者工具 v1.02.1907300
  • 调试基础库 2.8.1
  • cli创建
  • 自定义组件模式

联系方式

[QQ] 329433877

2019-08-27 14:45 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com

同样遇到这个问题

3***@qq.com

3***@qq.com

我的也是 不晓得为什么
我直接 this.$forceUpdate();

1***@qq.com

1***@qq.com - 小陈

数组的更改很多方法确实不能触发视图的更新,楼上说的对,我也是这样的,强制更新下视图就好了

h***@163.com

h***@163.com

我跟你一样调用数组的splice方法视图没有更新,一开始猜想是key的问题,然并卵。

5***@qq.com

5***@qq.com

不要用this.$set

import Vue from 'vue'
Vue.set(obj,key,value)

有时用this.$set 提示没有函数

9***@qq.com

9***@qq.com - air

微信小程序和真机运行都会出现这个问题,从去年到现在,一直都是这个问题,希望官方能修复吧

佚名9527

佚名9527

不算是bug吧 , Vue 学习->教程->内在->深入响应原理->检测变化的注意事项 。中对于对象和数组有解释,

由于 JavaScript 的限制,Vue 不能检测数组和对象的变化。尽管如此我们还是有一些办法来回避这些限制并保证它们的响应性。

对于数组  
Vue 不能检测以下数组的变动:  
  
当你利用索引直接设置一个数组项时,例如: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 // 不是响应性的  
为了解决第一类问题,以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果,同时也将在响应式系统内触发状态更新:  
  
// Vue.set  
Vue.set(vm.items, indexOfItem, newValue)  
// Array.prototype.splice  
vm.items.splice(indexOfItem, 1, newValue)  
你也可以使用 vm.$set 实例方法,该方法是全局方法 Vue.set 的一个别名:  
  
vm.$set(vm.items, indexOfItem, newValue)
``````javascript  

Viccy

Viccy

同样的问题,是bug吗

直接强制更新视图 this.$forceUpdate();

该问题目前已经被锁定, 无法添加新回复