h***@163.com
h***@163.com
  • 发布:2022-02-19 12:12
  • 更新:2022-02-22 12:18
  • 阅读:334

【报Bug】for循环key值不能正确获取导致组件被直接复用的问题

分类:uni-app

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

PC开发环境操作系统: Windows

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

第三方开发者工具版本号: 1.05.2201240 | 1.06.2201240

基础库版本号: 2.22.0

项目创建方式: CLI

CLI版本号: latest

示例代码:

页面

<template>  
    <view>  
            <view v-for="item in list[c]" :key="item.id">  
                <test v-if="[1,2].includes(item.id)">{{item.id}}</test>  
            </view>  
            <button @click="click">change</button>  
    </view>  
</template>  
<script>  
import test from './components/test'  
    export default {  
        components: {test},  
    data() {  
            return {  
                c: 0,  
                list: [[{id:1}],[{id:2}]],  
            }  
        },  
        methods: {  
            click() {  
                this.c = this.c == 0 ? 1 : 0  
            }  
        }  
    }  
</script>

test组件

<template>  
  <view>  
    test-<slot></slot>  
  </view>  
</template>  

<script>  
  export default {  
    data() {  
      console.log('test in data')  
      return {}  
    }  
  }  
</script>

操作步骤:

上面代码,点击change按钮,可以看到控制台没有打印test in data,组件没有被重新实例化创建

预期结果:

v-for给了不同key值,那么就应该重新创建组件

实际结果:

组件被原地复用

bug描述:

v-for循环内部有需要转换语法的代码时,key不能取到正确的值,导致循环的组件被直接复用,通过查看构建生成的代码发现render函数返回的对象缺少key所需要的值,示例代码中只返回了$orig和被转换的if条件所需的值

2022-02-19 12:12 负责人:无 分享
已邀请:
FullStack

FullStack - 【插件开发】【专治疑难杂症】【ios上架、马甲包、白包、过审、已成功上架过几百个】【多款插件已上架:https://ext.dcloud.net.cn/publisher?id=22130】【非诚勿扰】QQ:543610866

提供可以复现的demo,方便排查

DCloud_UNI_GSQ

DCloud_UNI_GSQ

问题确认,已加分,后续修复。

临时处理办法:

:key="item.id.toString()"

该问题目前已经被锁定, 无法添加新回复