【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>
相关推荐
谢尔登16 分钟前
Vue3 响应式系统——computed 和 watch
前端·架构
愚公移码18 分钟前
蓝凌EKP产品:主文档权限机制浅析
java·前端·数据库·蓝凌
摘星编程29 分钟前
React Native for OpenHarmony 实战:RefreshControl 下拉刷新组件
javascript·react native·react.js
欣然~2 小时前
法律案例 PDF 批量转 TXT 工具代码
linux·前端·python
一个小废渣2 小时前
Flutter Web端网络请求跨域错误解决方法
前端·flutter
鸣弦artha2 小时前
Flutter框架跨平台鸿蒙开发——Extension扩展方法
android·javascript·flutter
符文师3 小时前
css3 新特性
前端·css3
ct9783 小时前
WebGL开发
前端·gis·webgl
C_心欲无痕3 小时前
前端页面渲染方式:CSR、SSR、SSG
前端
果粒蹬i4 小时前
生成式 AI 质量控制:幻觉抑制与 RLHF 对齐技术详解
前端·人工智能·easyui