【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>
相关推荐
麦麦大数据1 小时前
D038 vue+django西游记问答知识图谱可视化系统
vue.js·django·问答系统·知识图谱·neo4j·可视化·可是还
合作小小程序员小小店2 小时前
web开发,在线%超市销售%管理系统,基于idea,html,jsp,java,ssh,sql server数据库。
java·前端·sqlserver·ssh·intellij-idea
不爱学英文的码字机器3 小时前
重塑 Web 性能:用 Rust 与 WASM 构建“零开销”图像处理器
前端·rust·wasm
浩星3 小时前
react的框架UmiJs(五米)
前端·javascript·react.js
子醉6 小时前
推荐一种适合前端开发使用的解决本地跨域问题的办法
前端
Niyy_6 小时前
前端一个工程构建多个项目,记录一次工程搭建
前端·javascript
xiangxiongfly9156 小时前
CSS link标签
前端·css
快乐非自愿7 小时前
常用设计模式:工厂方法模式
javascript·设计模式·工厂方法模式
岁月宁静7 小时前
AI 多模态全栈应用项目描述
前端·vue.js·node.js