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

  • 网页制作完成后,在最终上线之前,可以在本地进行测试。上线后会根据反馈数据进行优化

    网页制作完成后,在最终上线之前,可以在本地进行测试。上线后会根据反馈数据进行优化

  • 微信视频怎么设置铃声音乐(微信视频怎么设置没有声音)

    微信视频怎么设置铃声音乐(微信视频怎么设置没有声音)

  • 腾讯会议怎么播放PPT(腾讯会议怎么播放电脑里面的声音)

    腾讯会议怎么播放PPT(腾讯会议怎么播放电脑里面的声音)

  • 进入省电模式无法开机(进入省电模式无法过入cmos)

    进入省电模式无法开机(进入省电模式无法过入cmos)

  • 管理信息系统的开发就是编程吗(管理信息系统的定义)

    管理信息系统的开发就是编程吗(管理信息系统的定义)

  • 苹果手机应用宝怎么下载(苹果手机应用宝怎么下载不了)

    苹果手机应用宝怎么下载(苹果手机应用宝怎么下载不了)

  • 淘宝什么情况下会被禁言(淘宝什么情况下不能代付)

    淘宝什么情况下会被禁言(淘宝什么情况下不能代付)

  • 小米10pro多少倍变焦(小米10pro详细参数)

    小米10pro多少倍变焦(小米10pro详细参数)

  • 内存条最大多少G(内存条最大多少GB)

    内存条最大多少G(内存条最大多少GB)

  • apple pencil找不到了能查找么(apple pencil找不到了怎么着定位)

    apple pencil找不到了能查找么(apple pencil找不到了怎么着定位)

  • 机械硬盘叠瓦式和垂直区别(机械硬盘叠瓦式能用多久)

    机械硬盘叠瓦式和垂直区别(机械硬盘叠瓦式能用多久)

  • 对方收款功能只能在境内使用(微信收款显示对方)

    对方收款功能只能在境内使用(微信收款显示对方)

  • 苹果11无故关机什么原因(苹果无故关机过段时间又能开)

    苹果11无故关机什么原因(苹果无故关机过段时间又能开)

  • 红米k30和k305g参数对比(红米k30和红米k305g哪个好用)

    红米k30和k305g参数对比(红米k30和红米k305g哪个好用)

  • 显卡驱动装在c盘吗(显卡驱动装在C盘吗)

    显卡驱动装在c盘吗(显卡驱动装在C盘吗)

  • 话筒将什么信号转化为什么信号(话筒把什么信号转化为)

    话筒将什么信号转化为什么信号(话筒把什么信号转化为)

  • 手机一直打开nfc费电吗(手机一直打开nfc有什么危害吗)

    手机一直打开nfc费电吗(手机一直打开nfc有什么危害吗)

  • 免拼怎么用(免拼怎么用不了)

    免拼怎么用(免拼怎么用不了)

  • 华为mate30是不是曲屏(华为mate30什么型号)

    华为mate30是不是曲屏(华为mate30什么型号)

  • 小米手机夜光屏怎么开(小米手机夜光屏调节多少合适)

    小米手机夜光屏怎么开(小米手机夜光屏调节多少合适)

  • 苹果11pro max充电满了没及时拔会影响么(苹果11promax充电器原装图片)

    苹果11pro max充电满了没及时拔会影响么(苹果11promax充电器原装图片)

  • 数据库应用系统中数据资源的共享应该满足(数据库应用系统的概念)

    数据库应用系统中数据资源的共享应该满足(数据库应用系统的概念)

  • 显卡1050ti和1650区别(显卡1050ti和1660区别)

    显卡1050ti和1650区别(显卡1050ti和1660区别)

  • 小米9拍照能超过p20pro吗(小米9拍照参数设置)

    小米9拍照能超过p20pro吗(小米9拍照参数设置)

  • 腾讯电脑管家怎么清除痕迹?(腾讯电脑管家怎么修复dll)

    腾讯电脑管家怎么清除痕迹?(腾讯电脑管家怎么修复dll)

  • cupsdisable命令  停止指定的打印机(cuppath)

    cupsdisable命令 停止指定的打印机(cuppath)

  • zcat命令  查看压缩文件的内容(查看zip文件命令)

    zcat命令 查看压缩文件的内容(查看zip文件命令)

  • 小规模缴纳企业所得税会计分录
  • 个税手续费怎么交增值税
  • 个人所得税如何退税操作流程
  • 员工团体意外保险怎么报销
  • 医院财政资金免企业所得税吗
  • 年末发票
  • 其他应交款入哪个科目
  • 员工借款后离职怎么办
  • 当月开的发票当月已付款怎么做分录?
  • 私人转公账可以开发票吗
  • 拿票报销的交通费要交个人所得税吗
  • 城建税按实际缴纳增值税
  • 一般纳税人的主表
  • 公司作账都按不含税价吗
  • 既销售货物又提供劳务例题
  • 审计报告格式与范文怎么写?
  • 金蝶现金流量表附表项目如何指定
  • 小规模纳税人核定征收标准
  • 公账转公账没有发票
  • 销售商品发生的现金折扣
  • 我想设置应用
  • 硬盘分区的原则主要有哪些
  • cookie 区别
  • php中字符串函数
  • 股权无偿赠与协议书范本
  • PHP:time_nanosleep()的用法_misc函数
  • php制作数字验证码
  • PHP:proc_get_status()的用法_命令行函数
  • vue的安装命令
  • vi应用项目
  • uniapp webgl
  • 赠送客户商品分录
  • 红字增值税发票怎么开具图解
  • javascriptz
  • pytorch教程
  • react组件constructor
  • which 查找文件
  • 报销的时候发票金额大于实际报销的金额
  • 企业年度预算编制流程
  • 销售折扣购物卡怎么做账
  • 公司多余的钱叫什么
  • mongodb 数据文件
  • 长期无法收回的应收账款如何处理
  • 销售费用变动率异常
  • 生产企业免抵退税实例
  • 税费退库怎么做账
  • 购买的手机可以退货吗
  • sql server 2008的安全机制
  • 当月未取得发票的费用怎么入账
  • 进口关税,增值税是进口设备重置成本中的从属费用
  • 应付账款冲减会计分录
  • 存量资金上缴财政怎么做账
  • 水电费收据可以入公司帐吗
  • 农产品成本包含所消耗的物资费用
  • 如何定义是应付还是应付
  • 用工资冲借款报税可以吗
  • sql中where语句的写法
  • mysql表中数据
  • navicat查询结果下面输出栏如何关闭
  • win10显示win8
  • windows7的所有操作都可以从( )
  • winxp系统介绍
  • macbookpro怎么测声音
  • ubuntu20.04设置共享文件夹
  • 中国有多少台百万机组
  • 膈肌窝里有痦子
  • mac怎么预览cr3
  • windows补丁kb3033929
  • win8开始界面设置
  • shell脚本 教程
  • 搭建简单的spike课程
  • <2> unity3d 分包与上google play 之具体实战
  • android datagridview
  • jqueryui
  • 北京电子税务
  • 2000元工资交多少党费
  • 怎么查询企业的联系方式
  • 无偿赠送的税务怎么处理
  • 生育保险证明去哪里办
  • 跪式服务礼仪规范图片
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设