筝筝日上
筝筝日上
  • 发布:2025-11-14 17:13
  • 更新:2025-11-14 17:16
  • 阅读:15

【报Bug】v-for有slot时, 删除list里的元素时会报错

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: x64

HBuilderX类型: 正式

HBuilderX版本号: 4.86

第三方开发者工具版本号: 1.06

基础库版本号: 3.9.3

项目创建方式: HBuilderX

操作步骤:

组件代码

<template>  
    <view v-for="(item, index) in dataList" :key="item.id" >  
        <slot :data="item"></slot>  
    </view>  
</template>  

<script setup>  
    import { ref, defineModel } from 'vue';  
    const dataList =  defineModel('dataList', {type: Array, required: true})  
    console.log(dataList.value);  
</script>

父组件代码

<template>  
    <TestA v-model:dataList="dataList">  
        <template #default={data}>  
            <input style="height: 30px; border: 1px solid #000; margin: 10px;"   />  
        </template>  
    </TestA>  
    <button @click="deleteItem()">删除</button>  
</template>  

<script setup>  
    import { ref } from 'vue';  
    import TestA from '@/components/test-a.vue'  
    const dataList = ref([{  
            id: 1,  
            name: 'a',  
        }, {  
            id: 2,  
            name: 'b',  
        }, {  
            id: 3,  
            name: 'c',  
        }  
    ])  
    function deleteItem() {  
        dataList.value.splice(0, 1)  
    }  
</script>

预期结果:

预期不报错, 且删除后变为2个input框 , 第一个里面的值是 2 , 第二个里面的值为空

实际结果:

报错, 第一个里面的值是 1 , 第二个里面的值为 2

bug描述:

<view v-for="(item, index) in dataList" :key="item.id" >
<slot :data="item"></slot>
</view>

在微信小程序里当dataList里的元素发生删除时, 会报错

[Component] More than one slot named "d-0" are found inside a single component instance (in component "components/test-a"). The first one was accepted.

h5不会出现这种情况, 而且如果slot里传的如果有input , 输入的东西不会删除, 是不是底层的key出了问题

2025-11-14 17:13 负责人:无 分享
已邀请:

要回复问题请先登录注册