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

  • 错误描述: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>
相关推荐
一生为追梦35 分钟前
Linux 内存管理机制概述
前端·chrome
喝旺仔la1 小时前
使用vue创建项目
前端·javascript·vue.js
心.c1 小时前
植物大战僵尸【源代码分享+核心思路讲解】
前端·javascript·css·数据结构·游戏·html
喝旺仔la1 小时前
Element Plus中button按钮相关大全
前端·javascript·vue.js
计算机学姐1 小时前
基于SpringBoot+Vue的高校门禁管理系统
java·vue.js·spring boot·后端·spring·intellij-idea·mybatis
柒@宝儿姐1 小时前
Git的下载与安装
前端·javascript·vue.js·git·elementui·visual studio
Hiweir ·1 小时前
机器翻译之数据处理
前端·人工智能·python·rnn·自然语言处理·nlp·机器翻译
敲敲敲敲暴你脑袋2 小时前
【cesium】绘制贴地线面和自定义Primitive
javascript·webgl·cesium
曈欣2 小时前
vue 中属性值上变量和字符串怎么拼接
前端·javascript·vue.js
计算机学姐3 小时前
基于SpringBoot+Vue的宠物医院管理系统
java·vue.js·spring boot·后端·mysql·intellij-idea·mybatis