s***@163.com
s***@163.com
  • 发布:2022-07-08 12:22
  • 更新:2022-07-08 14:05
  • 阅读:167

严重!!!key如同虚设,v-for="item in list" :key="item.id"不正常,v-for="(item,index) in list" :key="index"则正常

分类:uni-app

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

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: Windows 功能体验包 1000.22000.778.0

HBuilderX类型: 正式

HBuilderX版本号: 3.4.18

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

基础库版本号: 2.24.6

项目创建方式: HBuilderX

示例代码:
<template>  
    <view class="content">  
        <template v-for="item in list" :key="item.id">  
            <view @click="showid(item.id)">{{ item.id }}</view>  
        </template>  

        <view @click="add">add</view>  
    </view>  
</template>  

<script>  
    import {  
        ref,  
        computed,  
        reactive  
    } from 'vue';  
    export default {  
        setup() {  
            const obj = reactive({  
                list: [{  
                    "id": 1657251742000  
                }, {  
                    "id": 1657251711000  
                }]  
            });  

            const list = computed(() => obj.list);  

            const add = () => {  
                obj.list.splice(0, 0, {  
                    "id": 123  
                });  
            };  

            const showid = (id) => {  
                console.log(id);  
            };  

            return {  
                add,  
                showid,  
                list  
            }  
        }  
    }  
</script>

操作步骤:

点击add,然后点击1657251742000

预期结果:

日志输出123

实际结果:

日志输出1657251742000

bug描述:

普通的v-for里点击输出不正确

2022-07-08 12:22 负责人:无 分享
已邀请:
s***@163.com

s***@163.com (作者)

点击add,然后再点击123、1657251742000、1657251711000,日志输出结果:123、123、1657251711000
正确结果:123、1657251742000、1657251711000

风之源

风之源

你这个写法不是uniapp的标准结构,应该是逻辑层和渲染层数据不一样。建议用uniapp生命周期里的computed写法

  • s***@163.com (作者)

    UNIAPP VUE3

    2022-07-08 12:55

  • 风之源

    回复 s***@163.com: 我直接复制你的代码运行,一切正常啊

    2022-07-08 12:59

  • s***@163.com (作者)

    回复 风之源: 这是小程序代码

    2022-07-08 13:03

  • 风之源

    回复 s***@163.com:你换个写法吧,uniapp的computed不需要导入,而且和setup同级

    2022-07-08 13:06

  • s***@163.com (作者)

    回复 风之源: 你确定你是用vue3?

    2022-07-08 13:09

s***@163.com

s***@163.com (作者)

<template>  
    <view class="content">  
        <template v-for="item in list" :key="item.id">  
            <view @click="showid(item.id)">{{ item.id }}</view>  
        </template>  

        <view @click="add">添加</view>  
    </view>  
</template>  

<script>  
    import {  
        ref  
    } from 'vue';  

    export default {  
        setup() {  
            const list = ref([{  
                "id": 'BBB'  
            }, {  
                "id": 'CCC'  
            }]);  

            const add = () => {  
                list.value.splice(0, 0, {  
                    "id": 'AAA'  
                });  
                // list.value = [{  
                //  "id": 'AAA'  
                // }, {  
                //  "id": 'BBB'  
                // }, {  
                //  "id": 'CCC'  
                // }];  
            };  

            const showid = (id) => {  
                console.log(id);  
            };  

            return {  
                add,  
                showid,  
                list  
            }  
        }  
    }  
</script>
  • s***@163.com (作者)

    点击添加,再点击BBB居然显示AAA

    2022-07-08 13:19

s***@163.com

s***@163.com (作者)

<template v-for="item in list" :key="item.id">   
改成 v-for="item in list" :key="item.id"就正常
s***@163.com

s***@163.com (作者)

这么简单的使用,居然有bug,可见vue3不成熟

s***@163.com

s***@163.com (作者)

如果把:key="index" 改成 :key="item.id"

点击添加,再点击BBB居然显示AAA

  • 钱诚

    这能是vue3不成熟?list.value.splice(0, 0, {

    "id": 'AAA'

    }); 这不都被你替换掉了

    2022-07-08 15:55

  • s***@163.com (作者)

    回复 9***@qq.com: 这不是替换,是插入数据到顶部,这段代码换在网页开发是运行正常的

    2022-07-08 16:53

  • s***@163.com (作者)

    回复 9***@qq.com: 就算重新赋值也不正常,点击BBB也是显示AAA


                     list.value = [{    
    "id": 'AAA'
    }, {
    "id": 'BBB'
    }, {
    "id": 'CCC'
    }];

    2022-07-08 16:56

要回复问题请先登录注册