【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>
相关推荐
Hello--_--World1 分钟前
React:useState 函数式更新、useContext 全解析、useReducer 深度解析
前端·react.js·前端框架
李白的天不白4 分钟前
vue优化建议
前端·javascript·vue.js
前端老石人6 分钟前
Chrome DevTools 调试入门:从零开始排查 CSS 问题
前端·css·chrome devtools
恋猫de小郭10 分钟前
经典,Flutter iOS 又修复了一个构建问题,还是很抽象
android·前端·flutter
invicinble15 分钟前
前端框架使用vue-cli(总篇章介绍)
前端·vue.js·前端框架
QD_ANJING19 分钟前
普及一下五月AI前端面试需要达到的强度....
前端·javascript·vue.js·人工智能·面试·职场和发展
AI自动化工坊19 分钟前
Chrome DevTools MCP:让AI编码代理获得浏览器调试能力
前端·人工智能·chrome devtools
ZC跨境爬虫20 分钟前
跟着 MDN 学 HTML day_26:(DOM 的树形结构与节点导航)
前端·ui·html·音视频·视频编解码
2601_9534656128 分钟前
纯前端高性能!m3u8live.cn 重新定义 M3U8 在线播放与调试体验
开发语言·前端·javascript·m3u8