【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>
相关推荐
招来红月1 小时前
记录JS 实用API
javascript
别叫我->学废了->lol在线等1 小时前
演示 hasattr 和 ** 解包操作符
开发语言·前端·python
霍夫曼1 小时前
UTC时间与本地时间转换问题
java·linux·服务器·前端·javascript
VX:Fegn08952 小时前
计算机毕业设计|基于Java人力资源管理系统(源码+数据库+文档)
java·开发语言·数据库·vue.js·spring boot·后端·课程设计
DARLING Zero two♡2 小时前
浏览器里跑 AI 语音转写?Whisper Web + cpolar让本地服务跑遍全网
前端·人工智能·whisper
꒰ঌ小武໒꒱2 小时前
文件上传全维度知识体系:从基础原理到高级优化
javascript·node.js
Lovely Ruby2 小时前
前端er Go-Frame 的学习笔记:实现 to-do 功能(三),用 docker 封装成镜像,并且同时启动前后端数据库服务
前端·学习·golang
老华带你飞2 小时前
健身房|基于springboot + vue健身房管理系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端
JIngJaneIL2 小时前
基于Java酒店预约系统(源码+数据库+文档)
java·开发语言·数据库·vue.js·spring boot
深红2 小时前
玩转小程序AR-实战篇
前端·微信小程序·webvr