【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>
相关推荐
hunterandroid4 分钟前
Compose 性能优化:从卡顿到丝滑的实战经验
前端
hunterandroid9 分钟前
Kotlin Coroutines 在 Android 项目中的落地实战
前端
不一样的少年_17 分钟前
不用框架,手搓 AI Agent:(一) 先让它跑起来
前端·后端·agent
味悲17 分钟前
浏览器解析机制与XSS的15种编码绕过
前端·xss
小牛itbull26 分钟前
【译】为什么我使用 React 重构了 WordPress?
前端·react.js·重构
用户0595401744627 分钟前
AI Agent 记忆存储踩坑实录:这个问题让我排查了 3 天,最终用 pytest + Docker 实现秒级回归
前端·css
用户2986985301429 分钟前
在 React 中拆分 Excel 文件:从工作表到行列的实践
javascript·react.js·excel
今日无bug31 分钟前
Emmet 语法速成指南
前端·css·html
Hello.Reader34 分钟前
Tailwind CSS v4.3 从入门到实战Vite 安装、响应式布局、暗黑模式与主题配置
前端·css
想要成为糕糕手37 分钟前
238. 除了自身以外数组的乘积 — 面试向深度解析
javascript·算法·面试