【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>
相关推荐
赵广陆8 小时前
企业实战:Web服务端搭建
前端·langchain·langgraph
常宇佳8 小时前
vue3 实战系列之无法识别vue组件
前端·javascript·vue.js
掘金者阿豪8 小时前
Codex 怎么突然变慢了?一个需求跑几十分钟,我才发现它的工作方式已经变了
前端·后端
用户931456355668 小时前
从 3 秒到 300 毫秒:一次真实的前端首屏性能优化全记录
前端
whn19778 小时前
dm9安装初体验
前端
阿黎梨梨8 小时前
从零搞懂 JWT 登录鉴权:一张“电子通行证”的诞生记
前端
全栈项目管理程序猿8 小时前
ArcGIS JS 基础教程(12):视图截图 takeScreenshot
javascript
用户921080262868 小时前
ChatMessageList 消息列表组件:基于 BubbleList 搭建 AI 对话展示区
前端
HjhIron9 小时前
实战 React + JWT + Zustand:从零搭建登录鉴权系统
前端
小棉花的ai跨境之旅9 小时前
Codex 子 Agent 分工实战:Sol 当军师、Luna 当搬砖工,单任务成本压到 $0.61
javascript