用v-for遍历计算属性得出的数组,发现数组深层次的属性变动,只会触发一次视图更新,然后就数据变动就不触发了,好像遗失了响应式。不晓得这是vue版本的问题还是uniapp的问题。
template的部分代码
<view class="show-item" v-for="(item,itemIndex) in filteredData" :key="item.text">
<uni-title style="padding: 0px;" type="h4" :title="item.text" />
<view class="photo-container">
<image lazy-load="true" v-for="(url, picIndex) in item.pic" :src="url" :key="url" class="photo"
@click="selectPhoto(item.text, picIndex)" />
<view v-show="item.pic.length < 9" class="plus-button column-center">
<uni-icons size="50" type="plusempty" @click="uploadPhoto(item.text)" />
</view>
</view>
</view>
filteredData的形式
// 筛选数据
const filteredData = computed(() => {
let dataList = studentData.value?.data || []
if (selectedTag.value === '全部') {
return dataList || []
} else {
return dataList?.filter(item => item.text === selectedTag.value) || []
}
})
有问题的部分,使用splice和push都只会让视图更新一次,后续不变。而只要改用重新赋值的方法就没有这个问题,
let item = studentData.value.data.find(item => item.text === text)
// 错误的item.pic.splice(picIndex, 1)
item.pic = item.pic.filter((_, index) => index !== picIndex)
// 错误的item.pic.push(...fileUrls)
item.pic = [...item.pic, ...fileUrls]
1 个回复
DCloud_UNI_yuhe
你好,你是运行到哪个平台之后出现的问题?是否可以提供一下完整的可以运行的复现项目