【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>
相关推荐
雪芽蓝域zzs5 小时前
第6节:远程搜索弹窗(remote 模式),弹窗滚动加载分页
vue.js·elementui
Data analyse4565 小时前
Cookie过期引发UV上涨的复核方法
服务器·前端·数据分析·uv
paopaokaka_luck5 小时前
非遗文物数字化小程序(AI非遗问答、ONNX图像识别、协同过滤推荐、ECharts数据分析、非遗知识浏览与互动、文创商城订单闭环、文化活动报名签到、社区交流)
javascript·spring boot·mysql·数据分析·echarts·mybatis
Highcharts.js5 小时前
图表开发实战总结| 7 条“黄金法则”与“性能铁律”
前端·javascript·vue.js·编辑器·时序数据库·highcharts
Helix2505 小时前
Electron、WebView 框架与 HTA 对比:桌面应用选型、安全性与现代替代方案
前端·javascript·electron·webview·vbscript·hta·本地html应用
Ikalus19886 小时前
三套 API 都告诉我成功了,浏览器一个字都没收到
javascript
开开心心就好6 小时前
办公软件卸载不干净?专用工具一键清残留
java·前端·人工智能·智能手机·kafka·excel·memcache
Ikalus19886 小时前
计数器停在 0,我差点把一篇空摘要发出去
javascript
静默回滚6 小时前
图片能显示,画进canvas却空白:像素面积上限
前端
补码缩写6 小时前
canvas大图内存怎么算:宽×高×4只是第一份
前端