位置: IT常识 - 正文

解决vue中报错 Duplicate keys detected:‘1‘. This may cause an update error.(vue运行报错)

编辑:rootadmin
解决vue中报错 Duplicate keys detected:‘1‘. This may cause an update error. 报错截图:

推荐整理分享解决vue中报错 Duplicate keys detected:‘1‘. This may cause an update error.(vue运行报错),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue经典报错,vue运行报错,vue运行报错,vuex报错,vue错误提示,vuex报错,vue错误提示,vue错误处理,内容如对您有帮助,希望把文章链接给更多的朋友!

报错原因:

通过上图的报错信息我们不难看出,报错的主要原因出现在 key 值上,报错的意思大概是检测到重复的 key 值,通俗来讲就是你的 key 值不是唯一的。

解决方案:

问题的根源找到了,解决起来就会很简明扼要了,其实项目中出现这种报错多为以下这两种情况:

解决vue中报错 Duplicate keys detected:‘1‘. This may cause an update error.(vue运行报错)

第一种情况:

for 循环的 key 值不为唯一性。

<template> <div> <div v-for="(item,index) in listData" :key="item.idx">{{item.name}}</div> </div></template><script>export default { data() { return { listData: [ { idx: "0", name: "数据1" }, { idx: "0", name: "数据2" }, { idx: "1", name: "数据3" }, ], }; },};</script>

第二种情况:

页面上有两个 for 循环同一个数组,导致 key 重复。

<template> <div> <div v-for="(item,index) in listData" :key="item.idx">{{item.name}}</div> <div v-for="(item,index) in listData" :key="item.idx">{{item.name}}</div> </div></template><script>export default { data() { return { listData: [ { idx: "0", name: "数据1" }, { idx: "1", name: "数据2" }, { idx: "2", name: "数据3" }, ], }; },};</script>

以上即为两种常见的引起报错的情况,下面教你如何解决这个问题。

<template> <div> <div v-for="(item,index) in listData" :key="index">{{item.name}}</div> </div></template><script> export default { data() { return { listData: [ { idx: "0", name: "数据1" }, { idx: "0", name: "数据2" }, { idx: "1", name: "数据3" }, ], }; },};</script>

第一种情况我们可以直接将 key 值指定为 for 循环的 index 值,这样即可解决 key 重复的问题。

<template> <div> <div v-for="(item,index) in listData" :key="item.idx + 1">{{item.name}}</div> <div v-for="(item,index) in listData" :key="item.idx">{{item.name}}</div> </div></template><script>export default { data() { return { listData: [ { idx: "0", name: "数据1" }, { idx: "1", name: "数据2" }, { idx: "2", name: "数据3" }, ], }; },};</script>

第二种情况可以看到我们将第一个 for 循环中的 key 值拼接了一个数字,这样两个 for 循环中的 key 值都具有唯一性,故不会报错。其实不只是数字,字符串或者其它的标记都可以区别 key 值得唯一性,感兴趣的同学可以下去试一试。

本文链接地址:https://www.jiuchutong.com/zhishi/294572.html 转载请保留说明!

上一篇:阿尔萨斯的葡萄酒村,法国上莱茵省 (© Walter Bibikow/eStock Photo)(阿尔萨斯葡萄园)

下一篇:mavon-editor的使用

  • 耕地占用税中的耕地是指什么
  • 调整税率后增值税发票的开具
  • 小微企业免税销售额填含税还是不含税
  • 市政绿化工程的施工方案
  • 口罩属于什么经营类别
  • 委外加工怎么做仓库账
  • 发票用完了领发票需要带什么东西
  • 公司往来借款在现金流量表哪里填写
  • 车船抵扣如何填报
  • 股东借给公司的钱怎么归还
  • 自产商品用于在哪个科目
  • 支付境外特许权所得需要交什么税
  • 专项资金审计的目的
  • 半成品成本核算 一般企业怎么核算
  • 以汽车出资
  • 不含税劳务报酬怎么交税的
  • 境外劳务输出有哪些类型
  • 企业用于存货的支出
  • 设备投入安装计入什么科目
  • 开票商品名称是什么意思
  • 个体户交税起征点 2023年
  • 研发支出资本化支出在报表哪里
  • 发票丢失可以抵扣吗
  • 企业收入准则的主要内容
  • 专用发票超过360天作废
  • 小规模租赁收入申报流程
  • 公司购买房子涉及什么税
  • 企业医保分几种
  • Windows无法启动服务
  • 债券的到期收益率取决于
  • 电脑管家免费wifi
  • win10如何关闭windows安全中心图标
  • 魁北克老城区景点
  • 费尔南迪纳岛气候类型
  • 银行存款账面余额与银行账户余额
  • vue3路由守卫 微信授权登陆
  • 固定资产的销售怎么做账
  • 企业所得税本期已预交怎么算
  • 纳税人购进固定资产一次性扣除账务处理
  • 公允价值计量的投资性房地产
  • 纳税证明和完税证明的金额为什么不一样
  • 增值税普通发票查询真伪
  • sql有数据保护功能
  • CentOS 7下MySQL服务启动失败的快速解决方法
  • 小规模费用发票可以抵扣增值税吗
  • 增值税防伪税控系统
  • 无形资产的有效期限与法定保护期限相等
  • 固定资产暂估折旧怎么算
  • 发工资四舍五入多了几块钱怎么办
  • 对非本单位的营销方案
  • 全资子公司并入母公司
  • 颁给供应商的奖项
  • 公司控股的子公司 法人能被追加吗
  • 如何确定开票内容
  • 出售二手固定资产如何开票
  • sql两个数据怎么合并到一起
  • win10 电池报告
  • windows server 2008下一些设置技巧及优化经验总结
  • 安卓设备连接苹果设备
  • redhat gui
  • centos云服务器
  • rpm包安装的apache可以如何启动
  • wrsvn.exe是什么
  • xp 跳过 chkdsk
  • 苹果电脑mac系统键盘无法找到
  • linux datetime命令
  • apache2.4.46配置
  • 进程rundll32文件很多
  • win7桌面显示电脑图标
  • input lead
  • 怎么在html中调用js的函数
  • node chain
  • linux使用adb
  • android遇到的难题
  • nodejs function
  • jabsorb笔记_几个小例子第1/2页
  • jquery+ajax实现直接提交表单实例分析
  • 高速公路通行费的税率
  • 生育登记网上服务大厅山东
  • 金水区地税局办事大厅
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设