【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>
相关推荐
支撑前端荣耀4 分钟前
五、测试用例的组织和编写
前端
支撑前端荣耀5 分钟前
七、命令行运行Cypress
前端
支撑前端荣耀5 分钟前
九、重塑你的“测试习惯”——避开Cypress的那些“坑”
前端
拾光拾趣录7 分钟前
Vite 与 Webpack 热更新原理
前端·webpack·vite
GISer_Jing8 分钟前
前端开发—全栈开发
前端·javascript
great9 分钟前
yarn和npm有什么区别
前端
拾光拾趣录9 分钟前
Flutter跨平台、性能优化与安全
前端·flutter
支撑前端荣耀10 分钟前
六、Cypress与元素交互
前端
DoraBigHead17 分钟前
小Dora 的 JavaScript 修炼日记 · Day 1:变量三兄弟与作用域迷宫
前端·javascript·面试
年纪轻轻就扛不住21 分钟前
Express 入门指南(超详细教程)
前端·前端框架·node.js·express·js