【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>
相关推荐
hunterandroid42 分钟前
[鸿蒙从零到一] HarmonyOS Web 组件与 JSBridge 通信实战:从页面加载到安全协议
前端
xingren1 小时前
「拍摄器」UI 特效 - 在 Winform/WPF/WinUI3/Avalonia/Web 的实现
前端
其美杰布-富贵-李1 小时前
第 5 篇:Object3D、Group 与场景树
javascript·three.js
leslie1181 小时前
npm常用命令
前端·npm
艾伦野鸽ggg1 小时前
axios 基本操作
前端
不一样的少年_2 小时前
Claude Code 是怎么自己改代码的?答案藏在这 4 个工具里
前端·agent·ai编程
春波petal2 小时前
Vue3防抖搜索:从Lodash到customRef全解析
vue.js·vue3·防抖搜索
问商十三载2 小时前
RAG的适用边界在哪里?2026年价值与局限详解
大数据·前端·人工智能
爱勇宝3 小时前
人生没有最好的年龄,只有最好的状态
前端
达子6663 小时前
第22章_HarmonyOs开发图解之 蓝牙
vue.js