【报Bug】cover-view在v-for循环中被删除后依然会存在

分类：uni-app

bug反馈安卓 coverview

产品分类： uniapp/App

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： 22621.1702

HBuilderX类型：正式

HBuilderX版本号： 3.8.3

手机系统： Android

手机系统版本号： Android 12

手机厂商：小米

手机机型：红米k40

页面类型： vue

vue版本： vue2

打包方式：云端

项目创建方式： HBuilderX

示例代码：

<template>  
    <view class="content">  
        <view class="videobox" v-for="(item,index) in videoList" :key="index">  
            <video :src="item.src"></video>  
            <cover-view class="header">  
                <cover-view class="name">{{item.name}}</cover-view>  
            </cover-view>  
        </view>  
        <button style="margin-top: 100rpx;" @click="del">删除首个视频</button>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                videoList:[  
                    {src: "https://www.runoob.com/try/demo_source/movie.mp4",name: '视频名称1'},  
                    {src: "https://www.runoob.com/try/demo_source/movie.mp4",name: '视频名称2'},  
                    {src: "https://www.runoob.com/try/demo_source/movie.mp4",name: '视频名称3'}  
                ],  
            }  
        },  
        onLoad() {  

        },  
        methods: {  
            del(){  
                this.videoList.splice(0, 1)  
            }  
        }  
    }  
</script>  

<style>  
    .content{  
        padding: 20rpx;  
    }  
    .videobox{  
        width: 100%;  
        height: 300rpx;  
        position: relative;  
        margin-bottom: 10rpx;  
    }  
    .videobox video{  
        width: 100%;  
        height: 100%;  
    }  
    .videobox .header{  
        position: absolute;  
        left: 0;  
        top: 0;  
        width: 100%;  
        height: 50rpx;  
        background: rgba(0, 0, 0, 0.6);  
        color: #FFF;  
        display: flex;  
        align-items: center;  
        justify-content: center;  
    }  
</style>

操作步骤：

点击视频下方删除按钮

预期结果：

video和cover-view被删除

实际结果：

cover-view依然存在

bug描述：

在视频列表中给每个视频使用cover-view添加了一个视频名称覆盖在video之上,当数据被删除之后,cover-view依然会存在
附件图1为删除前效果,图2为删除两个后效果
只会在app上出现,网页无法复现

cover-view测试.zip

2023-05-28 18:40 负责人:DCloud_UNI_Anne 分享

7 个回复

最佳回复

DCloud_uniCloud_JSON

问题已收到，待确认。
临时方案：你可以用类似数据库软删除的方案。具体来说：你每一个 item 加一个 isDelete默认是 false，然后 v-if=“!item.isDelete” 要删除哪一个就把他改成 true。仍然不行的话就根据isDelete设置样式 width 设置为0。当然这些思路是临时方案，以便你马上解决问题，工程师确认问题后会从框架层面修复此问题