【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>
相关推荐
IT_陈寒13 分钟前
Redis内存暴涨,没想到是AOF重写捣的鬼
前端·人工智能·后端
ikoala14 分钟前
让 Codex 自己查账:一个省 token 的小技巧
前端·后端·ai编程
ikoala24 分钟前
AI 写页面像说明书,修 Bug 像贴膏药?把这两句话写进 AGENTS.md
前端·javascript·ai编程
Penge66640 分钟前
《Go 后端开发者学 TypeScript:ES Module了解》
javascript
Penge66644 分钟前
《Go 后端开发者学 TypeScript:从零搭建与运行》
javascript
Penge6662 小时前
《Go 后端开发者学 TypeScript:keyof关键字》
javascript
Penge6662 小时前
《Go 后端开发者学 TypeScript:extends关键字》
javascript
张张123y2 小时前
DSH 插件调试避坑:client.js 设置面板、热重载与高频报错排查表
开发语言·javascript·人工智能·开源·ecmascript·后端开发·ai agent
去伪存真3 小时前
AI Agent Harness 深度测评与技术选型实战
前端·agent
FRing035 小时前
vue2干货总结7(自定义指令、插槽、单页应用程序、路由的使用(VueRouter))
开发语言·前端·vue.js·vue2