【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>
相关推荐
wei yun liang几秒前
4.数据类型
前端·javascript·css3
奥升新能源平台3 分钟前
奥升充电平台OCPP协议解析
前端
JinSo4 小时前
我的2025年度总结:EasyEditor
前端·程序员
喝拿铁写前端8 小时前
前端开发者使用 AI 的能力层级——从表面使用到工程化能力的真正分水岭
前端·人工智能·程序员
wuhen_n9 小时前
LeetCode -- 15. 三数之和(中等)
前端·javascript·算法·leetcode
七月shi人9 小时前
AI浪潮下,前端路在何方
前端·人工智能·ai编程
非凡ghost9 小时前
MusicPlayer2(本地音乐播放器)
前端·windows·学习·软件需求
脾气有点小暴9 小时前
scroll-view分页加载
前端·javascript·uni-app
beckyye10 小时前
ant design vue Table根据数据合并单元格
前端·antd