【vue】报错 Duplicate keys detected 解决方案

小墨鱼_z

已于 2024-02-02 10:54:27 修改

阅读量2.4k

点赞数 10

分类专栏： vue element-ui js 文章标签： vue.js javascript 前端

于 2024-02-02 10:53:46 首次发布

本文链接：https://blog.csdn.net/angela_zhaoBei/article/details/135989011

版权

vue 同时被 3 个专栏收录

25 篇文章 1 订阅

订阅专栏

element-ui

15 篇文章 0 订阅

订阅专栏

7 篇文章 0 订阅

订阅专栏

本文讨论了在Vue.js中使用v-for时遇到的Duplicatekeysdetected错误，主要原因是子元素的key值不唯一。作者提供了将key值改为基于索引和元素ID的示例，以确保每个项都有唯一的标识。

摘要由CSDN通过智能技术生成

错误描述：Duplicate keys detected. This may cause an update error.
错误直译：检测到重复的键。这可能会导致错误。
错误原因：有相同父元素的多个子元素的v-for有相同的key值。

解决方法：

return:{
    dataList:[
        {
            name:'张三'，
            id:"1"
        },
        {    
            name:'李四'，
            id:"2"
        }
    ]
}
<span v-for="(item, index) in dataList" :key="index">{{item.name}}</span>

//改变key值，将key值设置为唯一
<span v-for="(item, index) in dataList" :key=`${index}-${item.id}`>{{item.name}}</span>