【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>
相关推荐
lichenyang4533 分钟前
AI 聊天从纯文本到结构化卡片:SSE done 帧携带 card + 历史记录卡片恢复实战
前端
梦曦i39 分钟前
@meng-xi/vite-plugin v0.1.5:告别手动 import,精简工具层
前端
梦曦i44 分钟前
Vite 0.1.6重磅更新:智能导入+路由安全
前端
gxf5203088069881 小时前
Flutter 裁剪图片
前端·app
半岛@少年1 小时前
都是JS,CJS和ESM有什么区别?
javascript·esm·前端模块化·cjs
想吃火锅10052 小时前
【leetcode】165.比较版本号js
javascript·算法·leetcode
ITMan彪叔2 小时前
赋能UE运行态编辑平台: 网络图片下载的插件改造与复盘
前端
RANxy2 小时前
🚀 Umi Max 项目从0到1:企业级 React 脚手架实战
前端·前端框架
拾年2752 小时前
深入理解 V8 引擎:从代码执行到垃圾回收的完整链路
前端·javascript·v8
Master_Azur2 小时前
javaScript进阶
前端