【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>
相关推荐
boooooooom11 分钟前
手把手做一个图 RAG 烹饪问答系统:Neo4j + Milvus + LLM 的工程实践
前端·javascript·后端
小小善后师11 分钟前
HID 设备对接技术解析:基于本地中间服务的 WebSocket 通信模式
前端
黄油面包13 分钟前
Codex 额度三天见底后,我重新做了一周预算
前端·人工智能
PedroQue9916 分钟前
v2.7.1:修复 H5 端返回死循环闪烁问题
前端·uni-app
coderCN18 分钟前
Nodejs express+knex(ORM框架)
前端·node.js
求道於盲22 分钟前
python中的抽象类
前端
Csvn32 分钟前
CSS 层叠与现代布局:BFC、@layer 与 grid/flex 的取舍
前端
CodeSheep41 分钟前
OpenJDK 全面禁止 AI 生成代码!
前端·后端·程序员
IT_陈寒1 小时前
为什么我的Vue组件总是莫名其妙重渲染?
前端·人工智能·后端
乘风gg1 小时前
企业级 AI Coding 的 Harness 工程实战:8 个 Skill 串起全链路
前端·ai编程·claude