【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>
相关推荐
Aaswk3 分钟前
从 HTML/CSS/JS 到 Vue + Axios 的一篇实战笔记
前端·css·vue.js·html
IMPYLH8 分钟前
HTML 的 <span> 标签
前端·html
计算机魔术师22 分钟前
纽约时报诉案曝光:微软高管私下承认,AI抓取是史上最大劳动盗窃
前端
晓得迷路了25 分钟前
栗子前端技术周刊第 147 期 - React Router 8.4、Vite 云服务攻击、pnpm 12.4...
前端·javascript·react.js
SEO_juper36 分钟前
2026年用Python检测网站薄内容与重复页:用向量相似度找出“搜索引擎眼中一样“的页面(附完整代码)
开发语言·前端·seo·独立站·谷歌优化
+VX:Fegn089541 分钟前
计算机毕业设计|基于springboot + vue图书借阅管理系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
IT_陈寒44 分钟前
Vite这坑我踩了,说说静态资源加载那些事儿
前端·人工智能·后端
星光开发者1 小时前
基于Spring Boot的充电桩管理系统的设计与实现-计算机毕设【课程设计】57105
vue.js·spring boot·vscode·mysql·django·php·express
梦曦i1 小时前
uni-app x 0.7.0重磅升级:插件实例化,原生编译彻底打通
前端·uni-app x
开开心心就好1 小时前
C盘空间不够用?一键扫描清理系统垃圾
前端·javascript·安全·支持向量机·语音识别·etcd·模拟退火算法