【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>
相关推荐
问商十三载10 小时前
2026大模型GEO优化体系:3层链路提收录,零成本提34%引用率附工具包
大数据·前端·人工智能
IT_陈寒11 小时前
Redis过期key的坑,差点让线上服务崩了
前端·人工智能·后端
恋猫de小郭11 小时前
AI 又又造词,Graph 就又要替代 Loop 了?
前端·人工智能·ai编程
Dontla11 小时前
Canonical URL介绍(规范网址 / 规范链接)(Canonical Tag 规范标签)HTML标签、SEO优化
前端·html·seo
晓得迷路了11 小时前
栗子前端技术周刊第 138 期 - NestJS 12、Astro 7.1、npm 12...
前端·javascript·nestjs
学习-学习11 小时前
前端打包后白屏不报错:从 source-map、MIME、路由 base 到 chunk 加载失败的全链路排查
前端
霸道流氓气质11 小时前
摄像头视频预览实现教程:从原理到落地(ZLMediaKit+ flv.js+ Spring Boot)
javascript·spring boot·音视频
三84411 小时前
笔记:在同一个物理服务器上通过nginx的虚拟主机生成多个不同的web站点
java·前端·nginx
double_eggm11 小时前
uniapp.3
开发语言·前端·javascript
索西引擎11 小时前
【React】状态提升模式:设计原理、权衡分析与架构决策框架
前端·react.js·架构