vue数据变化页面list数据渲染内容不更新

宅᳐喵᳐੭

于 2024-09-09 11:11:55 发布

阅读量303

点赞数 8

CC 4.0 BY-SA版权

文章标签：前端 vue

本文链接：https://blog.csdn.net/weixin_39689007/article/details/142053744

错误代码，条件筛选后，数据变少只会更新数量条数，新数据不会重新渲染 ,因为key未更新就不会重新渲染

<view
    v-for="(good, goodIndex) in list"
    :key="goodIndex"
>
    <u-cell-group :border="false">
        <ListingGoodCell
            :ref="'goodCell'+ good.id"
            :good="good" 
        />
    </u-cell-group>
</view>

正确写法：

<view
    v-for="(good, goodIndex) in list"
    :key="good.id + goodIndex"
>
    <u-cell-group :border="false">
        <ListingGoodCell
            :ref="'goodCell'+ good.id"
            :good="good" 
        />
    </u-cell-group>
</view>

数据更新id发生改变，则会更新，但id未number的话可能存在重复的情况，与更新前一致不会更新，再相加前转为string类型就好了

<view
    v-for="(good, goodIndex) in list"
    :key="good.id +''+ goodIndex"
>
    <u-cell-group :border="false">
        <ListingGoodCell
            :ref="'goodCell'+ good.id"
            :good="good" 
        />
    </u-cell-group>
</view>