【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>
相关推荐
_kerneler16 分钟前
cgroup :限制cpu原理
java·服务器·前端
mONESY38 分钟前
Skill 技能与 MCP 协议的底层逻辑与协同真相
javascript
yingyima41 分钟前
AWK 速查手册:不仅仅是文本处理,更是性能与简洁的抉择
前端
悟空瞎说41 分钟前
WebSocket 前端丢包处理实战:原理与完整代码实现
前端
秋天的一阵风43 分钟前
✨ 原来文本转换可以这么丝滑!UnifiedJS 实战指南来了
前端·github·markdown
南川琼语1 小时前
HTTP——AJAX
前端·javascript·ajax
用户47949283569151 小时前
专升本前端毕业 1 年,从初创到大厂,我的开源项目上了 github trending,顺便聊聊做开源的收获
前端·后端·github
Ashley的成长之路1 小时前
前端性能优化实战手册·第1篇:从 Lighthouse 60 到 95 的完整路径
前端·性能优化
思码梁田2 小时前
CSS letter-spacing 属性详解:掌控字符之间的呼吸感
前端·css
大尚来也2 小时前
React Hooks全解析:告别繁琐Class组件
前端·react.js·前端框架