uni-app 小程序v-for动态绑定对象 对象修改后页面数据有残留的key 小程序开发工具里看appData没有刷新
uni-app 小程序v-for动态绑定对象 对象修改后页面数据有残留的key 小程序开发工具里看appData没有刷新
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Windows | win10 | HBuilderX |
| HBuilderX | 3.2.9 | |
| 工具 | 1.05.2108150 | |
| 基础库 | 2.19.6 |
示例代码：
<template>
<view class="page-container">
<button @click="filtingData">点击切换对象</button>
<block v-for="(cuItem,cuKey) in filtedData" :key="cuKey">
<view>{{cuKey}}</view>
</block>
</view>
</template>
<script>
export default {
data() {
return {
filtedData: {
a: 'a'
},
a: false,
b: {
b: 'b'
},
c: {
c: 'c'
}
}
},
methods: {
filtingData() {
this.a = !this.a;
let taskList = {}
if (this.a) {
taskList = this.b
} else {
taskList = this.c
}
this.filtedData = taskList;
console.log('filtedData',this.filtedData);
}
}
}
</script>
更多关于uni-app 小程序v-for动态绑定对象 对象修改后页面数据有残留的key 小程序开发工具里看appData没有刷新的实战教程也可以访问 https://www.itying.com/category-93-b0.html
7 回复
升级 HBuilder X 后重新编译
更多关于uni-app 小程序v-for动态绑定对象 对象修改后页面数据有残留的key 小程序开发工具里看appData没有刷新的实战教程也可以访问 https://www.itying.com/category-93-b0.html
这个问题是由于小程序中对象引用导致的。当你将 this.b 或 this.c 直接赋值给 this.filtedData 时，实际上传递的是对象引用，而不是创建新对象。
在小程序的渲染机制中，当对象引用没有完全改变时，可能会出现旧数据的残留。解决方案是创建新的对象副本：
filtedData() {
this.a = !this.a;
let taskList = {};
if (this.a) {
taskList = {...this.b}; // 使用扩展运算符创建新对象
} else {
taskList = {...this.c}; // 使用扩展运算符创建新对象
}
this.filtedData = taskList;
console.log('filtedData', this.filtedData);
}
或者使用 Object.assign：
taskList = Object.assign({}, this.b);