【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>
相关推荐
小蒜学长几秒前
基于SpringBoot + Vue的智能健身房管理系统的设计与实现(代码+数据库+LW)
java·数据库·vue.js·spring boot·后端
里欧跑得慢1 分钟前
AI 驱动的 UI 国际化方案自动适配:从单一语言到多语言布局的智能转换
前端·css·flutter·web
DolitD2 分钟前
云流技术深度剖析:单服务器下如何实现3D应用的多实例并发?
java·服务器·前端·3d·云原生·云计算
芦柑4649 分钟前
画布和3D导演台工具:短剧分镜从素材整理到空间预演的完整链路
服务器·前端·数据库
李蚊子22 分钟前
从代理提醒到真实响铃:懒熊闹钟的鸿蒙开发实践
前端·harmonyos
IT_陈寒30 分钟前
Redis的Lua脚本居然把我的集群搞崩了!
前端·人工智能·后端
计算机魔术师35 分钟前
索尼与华纳起诉Anthropic,指控其大规模盗用版权音乐训练Claude
前端
恋猫de小郭39 分钟前
AI 时代,一个优化 Flutter 的重复代码工具 Deslop
android·前端·flutter
穗余39 分钟前
Typescript let和var区别
前端·javascript·typescript
晓得迷路了44 分钟前
栗子前端技术周刊第 144 期 - Rspack 2.2、pnpm 12、Solid 2.0 RC...
前端·javascript·css