【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>
相关推荐
ji_shuke4 分钟前
Vue3 前端批量打印 PDF/图片踩坑记:跨域、合并打印、对话框闪退与按钮一直 loading
前端·pdf·状态模式·pdf打印
李伟_Li慢慢4 分钟前
06-mini版WebGLState
前端·three.js
李伟_Li慢慢9 分钟前
04-three.js的渲染流程概览
前端·three.js
李伟_Li慢慢9 分钟前
07-WebGLProperties
前端·three.js
爱勇宝10 分钟前
AI 都能写代码了,还要学计算机吗?
前端·后端·程序员
石像鬼₧魂石13 分钟前
【Y2Ksoft】四季贵州水世界乐园管理系统 —— 玻璃拟态 · 单文件HTML · 开箱即用
前端·html
涛涛ing16 分钟前
尤雨溪宣布:Vue 3.6 发布、Vue 4.0 启动、Vite 8 已落地
前端
李伟_Li慢慢19 分钟前
05-mini版材质
前端·three.js
学以智用22 分钟前
HTTP 请求头 Headers 完整详解
前端·后端
李伟_Li慢慢22 分钟前
03-threejs架构原理浅析
前端·three.js