【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>
相关推荐
一 乐16 分钟前
物流信息管理|基于springboot + vue物流信息管理系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·物流信息管理系统
weixin1997010801624 分钟前
《快手商品详情页前端性能优化实战》
前端·性能优化
IT_陈寒1 小时前
折腾一天才明白:Vite的热更新为什么偶尔会罢工
前端·人工智能·后端
AI茶水间管理员2 小时前
学习ClaudeCode源码之Agent核心循环
前端·人工智能·后端
挖稀泥的工人2 小时前
AI聊天界面的布局细节和打字跟随方法
前端·javascript·面试
竹林8182 小时前
从“连接失败”到丝滑登录:我用 ethers.js 连接 MetaMask 的完整踩坑记录
前端·javascript
颜酱2 小时前
图片大模型实践:可灵(Kling)文生图前后端实现
前端·javascript·人工智能
Reart3 小时前
从0解构tinyWeb项目--(Day:2)
javascript·后端·架构
木斯佳3 小时前
前端八股文面经大全:腾讯CSIG实习面(2026-04-10)·面经深度解析
前端·ai·xss·埋点·实习面经
孜孜不倦不忘初心3 小时前
Vue 项目结构与命名规范
vue.js·代码规范