[内容]
V3引擎v-for循环数据修改后不会更新,只有APP端这样,无论是自定义基座还是标准基座都存在此问题。项目已上传(HBuilderX创建的默认项目)。
IDE运行环境说明
[IDE版本号] HBuilderX 2.5.1.20200103和HBuilderX-alpha 2.5.6.20200113-alpha都存在此问题
重现步骤
<template>
<view class="data-list">
<button @click="upData()">更新数据</button>
<view class="info" v-for="item in items" @click="clickItem(item)" :key="item.id">
{{item.name}}
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
itmes: []
}
},
onLoad() {
//1.初始化赋值
let items = [];
for (var i = 0; i < 10; i++) {
items.push({
id: i,
name: '名称' + i
})
}
this.items = items;
},
methods: {
upData(){
let items = [];
for (var i = 10; i < 25; i++) {
items.push({
id: i,
name: '名称' + i
})
}
console.log('更新数据',{data:this.items});
//2.重新赋值后页面数据不会更新,必须强制刷新才会生效
this.items = items;
//3.强制重新渲染
this.$forceUpdate();
},
clickItem(item) {
//4.重新渲染后click事件传递的数据依然是第一次赋值的数据
uni.showToast({
title:item.name
})
}
}
}
</script>
<style lang="scss">
.data-list {
display: flex;
flex-direction: column;
.info {
padding: 20rpx;
margin-top: 20rpx;
}
}
</style>