【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>
相关推荐
JIngJaneIL12 小时前
书店销售|书屋|基于SprinBoot+vue书店销售管理设计与实现(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·毕设·书店销售管理设计与实现
徐同保12 小时前
n8n CLI 项目结构全面分析(node后端)
前端
墨雪不会编程13 小时前
C++基础语法篇五 ——类和对象
java·前端·c++
一 乐13 小时前
农产品销售|农产品供销|基于SprinBoot+vue的农产品供销系统(源码+数据库+文档)
java·前端·javascript·数据库·vue.js·spring boot
sunshine64113 小时前
JS实现悬浮可拖拽vue组件封装
开发语言·前端·javascript
lichong95113 小时前
《postman、apipost、smartApi 等使用与特点 3 天路线图(可打印 PDF+互动脑图)》
前端·测试工具·macos·pdf·postman·大前端·大前端++
怪我冷i13 小时前
es6与es5的模块区别
前端·ecmascript·es6·ai写作
一 乐13 小时前
助农服务系统|基于SprinBoot+vue的助农服务系统(源码+数据库+文档)
前端·数据库·vue.js
by__csdn13 小时前
Vue 2 与 Vue 3:深度解析与对比
前端·javascript·vue.js·typescript·vue·css3·html5
s***353013 小时前
怎么下载安装yarn
android·前端·后端