2***@qq.com
2***@qq.com
  • 发布:2025-07-26 22:39
  • 更新:2025-07-28 09:42
  • 阅读:113

视图更新是不是有点问题,push和splice会丢失响应性,最好方法是重新赋值

分类:uni-app

用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]
2025-07-26 22:39 负责人:无 分享
已邀请:
DCloud_UNI_yuhe

DCloud_UNI_yuhe

你好,你是运行到哪个平台之后出现的问题?是否可以提供一下完整的可以运行的复现项目

要回复问题请先登录注册