【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>
相关推荐
zhanghaha13141 分钟前
HTML系列教程:17_HTML 框架(frameset、frame、iframe)零基础详解
前端·html
IT_陈寒12 分钟前
React的useEffect依赖项居然骗了我三年
前端·人工智能·后端
一个金牛座的前端18 分钟前
AI 写前端,优化的是演示,不是交付
前端·ai·cursor
球球不吃虾34 分钟前
Nuxt在使用过程中的一些小总结(二)
前端·vue·nuxt
朝屯暮蒙vi1 小时前
随记:h5+中uploader不能添加参数数据,要通过task
javascript
2601_958352904 小时前
A-59U 仅 37mm 却集成 USB + 双波束?
前端·回声消除·语音模块·降噪处理·降噪消回音
泯泷9 小时前
那段文字是谁删的?Yjs 14 正式版之前,一套删除归属方案的实现与边界
前端·javascript·算法
hold?fish:palm10 小时前
34 合并K个升序链表
javascript·算法·链表
野槐12 小时前
前端项目优化(有了我,会发生...)
前端
幸运小圣12 小时前
PointerEvent 常用属性与事件整理【JavaScript】
开发语言·javascript·ecmascript