【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>
相关推荐
To_OC12 分钟前
从一个颜色选择器说起:我终于整明白了 React+TS 里的 model 与 api 分层
前端·react.js·typescript
赵大仁13 分钟前
浏览器端 RAG:Transformers.js + WebGPU 本地检索入门
前端·ai·react·webgpu·rag
zyplayer-doc16 分钟前
同一份制度别复制到多个知识库:用zyplayer-doc引用文档解决重复维护
javascript·人工智能·智能手机·开源·ocr
木叶丸29 分钟前
从 Loop 到 Graph:AI 智能体协作系统工程指南
前端·后端·架构
java1234_小锋2 小时前
Vue3专题 - 列表渲染
vue.js
吴懿不在 不负信仰2 小时前
从jQuery谈库与框架的设计之优劣
前端·javascript·jquery
灵析表格2 小时前
灵析表格手机号处理函数深度分析报告
前端·网络·json·wps·灵析表格·excel公式盒子
智海深蓝2 小时前
智慧渔业海上养殖数字孪生实践方向与难点拆解分析
java·前端·网络
DsirNg2 小时前
用原生 HTML5 视频与 Canvas 实现浏览器端视频抽帧封面
javascript·canvas·视频抽帧·前端实战·html5 video·浏览器 api
丁引2 小时前
《数据清洗的艺术:如何用20行核心逻辑优雅地删除无标签图片》
前端·数据库·python