位置: 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的使用

  • honor 20 lite是什么手机型号

    honor 20 lite是什么手机型号

  • 已连接但不可上网有感叹号怎么办(已连接不可上网该怎么办)

    已连接但不可上网有感叹号怎么办(已连接不可上网该怎么办)

  • 微信里的电话号码怎么设置(微信里的电话号码怎么隐藏起来)

    微信里的电话号码怎么设置(微信里的电话号码怎么隐藏起来)

  • sarm是什么(sarm是什么车)

    sarm是什么(sarm是什么车)

  • win加r是哪个键(window加r有什么用)

    win加r是哪个键(window加r有什么用)

  • 华为手机屏幕不灵敏是怎么回事(华为手机屏幕不停的自动跳)

    华为手机屏幕不灵敏是怎么回事(华为手机屏幕不停的自动跳)

  • 制导系统由哪几部分组成(制导系统功能)

    制导系统由哪几部分组成(制导系统功能)

  • 华为卡槽弹不出的原因(华为卡槽弹不出来要拆开修吗)

    华为卡槽弹不出的原因(华为卡槽弹不出来要拆开修吗)

  • oppor11屏幕失灵怎么办(oppor11s屏幕按不动怎么办)

    oppor11屏幕失灵怎么办(oppor11s屏幕按不动怎么办)

  • 共享单车扫一次骑多久(共享单车扫一次可以用多久)

    共享单车扫一次骑多久(共享单车扫一次可以用多久)

  • 转转永久封号可以解吗(转转永久封号了怎么办)

    转转永久封号可以解吗(转转永久封号了怎么办)

  • 修改评价可以改评分吗(改评价多久可以改)

    修改评价可以改评分吗(改评价多久可以改)

  • 隐藏幻灯片在哪个选项卡(隐藏幻灯片在哪个选项卡里面)

    隐藏幻灯片在哪个选项卡(隐藏幻灯片在哪个选项卡里面)

  • word文档页面设置16开(Word文档页面设置上下左右怎么设置)

    word文档页面设置16开(Word文档页面设置上下左右怎么设置)

  • 华为mate20x5G能用联通卡吗

    华为mate20x5G能用联通卡吗

  • 视听资料和电子数据的区别(视听资料和电子数据的关系)

    视听资料和电子数据的区别(视听资料和电子数据的关系)

  • 快手消息删除怎么恢复(快手信息删除)

    快手消息删除怎么恢复(快手信息删除)

  • 三星手机截屏怎么操作(三星手机截屏怎么截用什么键呢)

    三星手机截屏怎么操作(三星手机截屏怎么截用什么键呢)

  • 拍的抖音怎样才能让更多人第一时间看到(拍的抖音怎样才能上热门)

    拍的抖音怎样才能让更多人第一时间看到(拍的抖音怎样才能上热门)

  • 京东回收在哪(京东回收在哪里买)

    京东回收在哪(京东回收在哪里买)

  • 5g基站叫什么(5g基站啥意思)

    5g基站叫什么(5g基站啥意思)

  • 抖音怎么查好友(抖音怎么查好友艾特别人)

    抖音怎么查好友(抖音怎么查好友艾特别人)

  • 抖音管理员怎么设置(抖音管理员怎么设置心愿单)

    抖音管理员怎么设置(抖音管理员怎么设置心愿单)

  • b站怎么加好友(b站怎样通过手机号找人)

    b站怎么加好友(b站怎样通过手机号找人)

  • dnsconf命令  设置DNS服务器组态(dns configuration)

    dnsconf命令 设置DNS服务器组态(dns configuration)

  • 小规模免缴增值税吗
  • 税务行政处罚是指
  • 个体工商户怎么注销
  • 非盈利组织企业所得税主表如何填列
  • 通用发票
  • 取得社会团体会费专用票据可以税前扣除吗
  • 商业承兑过期后多久失效
  • 大病医疗可以抵扣吗
  • 购入设备发生的运输费计入什么科目
  • 外资企业的分支机构向总机构支付的管理费如何办理税前列支申请
  • 交了定金签了合同
  • 无法确认退货率时,差错更正为啥不反转增值税
  • 当期发生的费用
  • 其他综合收益包含哪些科目
  • 合伙企业需要交企业所得税吗?
  • 房产税计税依据房产原值怎么算
  • 转账支票存根属于银行回单吗
  • 抵债资产处置的意义
  • 管理费用劳务费现金流
  • 4月发票能入1月吗
  • 财务费用包括哪些主要内容
  • 发工资一定要交税吗
  • 亏损计提递延
  • 网速保护功能介绍
  • 期末未抵扣数
  • 垫付员工保险费的会计科目
  • php数组函数,选班长
  • 低值易耗品费用账务处理
  • 酒店预收款管理制度
  • php编程技术
  • 建筑工程增值税怎么算
  • 跨年费用入账
  • 劳保用品会计科目进什么科目
  • 我的十年怎么写
  • 人工智能机器人的好处
  • php中&&什么意思
  • Google C++ Style中允许使用的Boost库(1) 程序即人生 博客频道 CSDN.NET
  • 公司与公司往来账表格怎么制作
  • 4s店收到红字发票怎么办
  • 进项税没入账补入账分录
  • 企业所得税申报表在哪里打印
  • 预缴税款为什么不能跨月申报
  • c语言fgets函数用法stdin
  • cms是前端还是后端
  • 银行代发工资必须是本行的卡吗
  • sqlserver2008密码要求
  • PostgreSQL教程(五):函数和操作符详解(1)
  • 金税盘税务申报流程
  • 公司送礼计入什么会计科目
  • 只要有销售收入就能赚钱
  • 税务机关如何对个人股东股权财务报表审核
  • 无形资产减值准备借贷
  • 什么是年化收益和绝对利率
  • 汽车销售行业印章要求
  • 持有至到期投资减值准备
  • 资产减值损失什么科目
  • 应交税费减免税额在借方还是贷方
  • 企业弥补亏损的来源有
  • 会计记账借贷记什么账户
  • 明细分类账的填写
  • 深入分析换一种说法
  • Select count(*)、Count(1)和Count(列)的区别及执行方式
  • win8怎么没有我的电脑
  • archlinux安装教程2023 无线网络
  • linux yum命令详解
  • 进不去操作系统 怎么样修复引导
  • PRISMSTA.EXE - PRISMSTA是什么进程 有什么用
  • win7如何设置休眠不断网
  • linux中ftp
  • Manjaro Linux 0.8.13发布下载 可将系统装入SD卡
  • android item属性
  • android opengl绘图
  • JavaScript事件处理的方式(三种)
  • javascript:openattachment
  • jquery 图片
  • python列表的常用方法有哪些
  • 减免所得税额怎样计算
  • 四川省税务干部学校官网
  • 福建原盐和自然盐有什么区别
  • 公司处理固定资产汽车怎么交税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设