【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>
相关推荐
两只羊ovo9 小时前
Promise.all 并发请求实战:从串行 await 到双段并行
前端
七牛开发者9 小时前
解读 Cordis:dsh 一切皆插件背后的运行时设计
前端·javascript·后端
雷工笔记9 小时前
KingFusion驾驶舱-产能信息模块开发实战
javascript
BigTopOne9 小时前
ArLiveLite 学习计划
前端
慧都小项10 小时前
夜间Web回归跑到一半停了?TestComplete 15.83提升批量测试稳定性
前端·测试工具·数据挖掘·回归·汽车·web
两只羊ovo10 小时前
Agent ≠ 聊天机器人:从一问一答到 ReAct 循环,到底差在哪?
前端
摇曳的精灵10 小时前
前端缓存优化
前端·缓存·缓存优化
老王以为10 小时前
走进 AI Agent 第二篇:决定 AI Agent 能力上限的关键技术
前端·人工智能·机器学习
何以解忧,唯有..10 小时前
Python 异常处理完全指南:从基础到高级实践
开发语言·前端·python
Buke..10 小时前
【小程序逆向】某游快爆 AI 逆向 sign参数:AI 辅助分析与 MCP 工具链实战
前端·人工智能·爬虫·python·小程序·notepad++