【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>
相关推荐
小白探索世界欧耶!~4 分钟前
用iframe实现单个系统页面在多个系统中复用
开发语言·前端·javascript·vue.js·经验分享·笔记·iframe
bl4ckpe4ch4 分钟前
用可复现实验直观理解 CORS 与 CSRF 的区别与联系
前端·web安全·网络安全·csrf·cors
阿珊和她的猫15 分钟前
Webpack中import的原理剖析
前端·webpack·node.js
AI前端老薛35 分钟前
webpack中loader和plugin的区别
前端·webpack
一只爱吃糖的小羊36 分钟前
从 AnyScript 到 TypeScript:如何利用 Type Guards 与 Type Predicates 实现精准的类型锁死
前端·javascript·typescript
0思必得037 分钟前
[Web自动化] BeautifulSoup导航文档树
前端·python·自动化·html·beautifulsoup
脾气有点小暴39 分钟前
Git指令大全(常见版)
前端·git
QUST-Learn3D43 分钟前
geometry4Sharp Ray-Mesh求交 判断点是否在几何体内部
服务器·前端·数据库
持续升级打怪中1 小时前
ES6 Promise 完全指南:从入门到精通
前端·javascript·es6
AC赳赳老秦1 小时前
前端可视化组件开发:DeepSeek辅助Vue/React图表组件编写实战
前端·vue.js·人工智能·react.js·信息可视化·数据分析·deepseek