【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>
相关推荐
前端探险家Rick6 分钟前
React Native 二级弹出面板 + 键盘适配:从踩坑到正确方案
前端
用户921080262869 分钟前
MCP 是什么?用 Figma MCP 辅助还原 Vue 页面
前端
用户921080262869 分钟前
用 Figma MCP 还原 Vue 页面时,我遇到的三个问题
前端
修罗王10 分钟前
从 React Bits 到 Vue/Svelte Bits:重新定义前端“视觉表达层“
前端
kiros_wang11 分钟前
Notification 本地通知:定时消息、点击路由跳转、桌面角标适配
前端
计算机毕设定制辅导-无忧学长15 分钟前
《基于Vue的流浪动物救助中心管理系统的设计与实现》
java·vue.js·spring boot·流浪动物救助中心管理系统
flash俊杰18 分钟前
SQLite + sqlite-vec:100 篇文档内的私域知识库怎么做
前端
Hilaku35 分钟前
为什么死磕 1px 的团队,用户体验反而更差?
前端·javascript·程序员
雪芽蓝域zzs37 分钟前
第25章:地图下钻交互(点击省份,切换到对应省份城市地图)
vue.js·echars