注册登录

s***@163.com

发布：2022-07-08 12:22
更新：2022-07-08 14:05
阅读：322

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

分类：uni-app

bug反馈

产品分类： 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 负责人:无分享

6 个回复

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 (作者)

<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 (作者)

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

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

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

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

要回复问题请先登录或注册

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

操作步骤：

点击add，然后点击1657251742000

预期结果：

日志输出123

实际结果：

日志输出1657251742000

bug描述：

6 个回复

公告

相关问题

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

操作步骤： 点击add，然后点击1657251742000

预期结果： 日志输出123

实际结果： 日志输出1657251742000

bug描述：

与内容相关的链接

6 个回复

公告

相关问题

操作步骤：

点击add，然后点击1657251742000

预期结果：

日志输出123

实际结果：

日志输出1657251742000