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

  • 信息被对方拒收是什么意思(信息被对方拒收是什么原因)

    信息被对方拒收是什么意思(信息被对方拒收是什么原因)

  • 抖音怎么收集发财中国年(怎么在抖音发收藏视频)

    抖音怎么收集发财中国年(怎么在抖音发收藏视频)

  • vivo手机wifi历史在哪里查看(vivo手机怎么看以前连过的wifi)

    vivo手机wifi历史在哪里查看(vivo手机怎么看以前连过的wifi)

  • 拼多多提现的钱在哪里(拼多多提现的钱怎么才能上微信)

    拼多多提现的钱在哪里(拼多多提现的钱怎么才能上微信)

  • 华为p40微信分身怎么弄(华为P40微信分身怎么弄)

    华为p40微信分身怎么弄(华为P40微信分身怎么弄)

  • 快门次数用完了怎么办(如何查看相机快门次数)

    快门次数用完了怎么办(如何查看相机快门次数)

  • qq名字怎么加长(qq号长度)

    qq名字怎么加长(qq号长度)

  • 电笔显示123655什么意思(电笔显示1236什么意思)

    电笔显示123655什么意思(电笔显示1236什么意思)

  • nova4为什么照相不清晰(华为nova4e拍照不真实)

    nova4为什么照相不清晰(华为nova4e拍照不真实)

  • 苹果8p建议升级13.3系统吗(苹果8p建议升级15.7.1吗)

    苹果8p建议升级13.3系统吗(苹果8p建议升级15.7.1吗)

  • 京东退货要点击确认收货吗(京东商城退货需要先确认收货吗)

    京东退货要点击确认收货吗(京东商城退货需要先确认收货吗)

  • ipad4可以用电容笔吗(ipad4能不能用电容笔)

    ipad4可以用电容笔吗(ipad4能不能用电容笔)

  • 西瓜视频有电脑版嘛(电脑西瓜视频)

    西瓜视频有电脑版嘛(电脑西瓜视频)

  • 怎样把电脑上的歌曲下载到u盘上(怎样把电脑上的微信聊天记录转移到手机上)

    怎样把电脑上的歌曲下载到u盘上(怎样把电脑上的微信聊天记录转移到手机上)

  • 摄像头坏了怎么扫二维码(摄像头坏了怎么扫描二维码)

    摄像头坏了怎么扫二维码(摄像头坏了怎么扫描二维码)

  • 抖音视频怎么没有合拍(抖音视频怎么没有收藏功能了)

    抖音视频怎么没有合拍(抖音视频怎么没有收藏功能了)

  • 慕课上的课件怎样打印(慕课的课件怎么导出ppt)

    慕课上的课件怎样打印(慕课的课件怎么导出ppt)

  • 华为手环3怎么连接手机(华为手环3怎么调时间和日期)

    华为手环3怎么连接手机(华为手环3怎么调时间和日期)

  • 京东怎么删除学生认证(京东怎么删除消费记录)

    京东怎么删除学生认证(京东怎么删除消费记录)

  • 苹果11双卡双待么(苹果11双卡双待怎么设置主卡副卡)

    苹果11双卡双待么(苹果11双卡双待怎么设置主卡副卡)

  • 微信群链接多久失效啊(微信群链接多久自动删除)

    微信群链接多久失效啊(微信群链接多久自动删除)

  • 商户可扫码退款如何扫(商户可扫码退款怎么弄)

    商户可扫码退款如何扫(商户可扫码退款怎么弄)

  • 苹果8p双喇叭怎么关掉(iphone8双喇叭)

    苹果8p双喇叭怎么关掉(iphone8双喇叭)

  • 淘宝积分如何使用(淘宝积分怎么样)

    淘宝积分如何使用(淘宝积分怎么样)

  • 帝国cms容易被黑吗(帝国cms真的很好用)

    帝国cms容易被黑吗(帝国cms真的很好用)

  • 购入车辆进项如何做账
  • 本月发生费用未支付会计处理
  • 城镇土地使用税纳税义务发生时间
  • 纳税表不得抵扣什么意思
  • 湖北工会工作网
  • 个人转款到对公账户会计分录
  • 城市建设税和教育费附加计算公式
  • 应收帐款备抵法
  • 增值税销项税额在借方还是贷方
  • 收到货物记账凭证
  • 低值易耗品怎么报废
  • 个人转租房屋需交税吗
  • 关联的公司
  • 基金申购费有下限吗
  • 个税手续费返还比例
  • 个人捐款单位需要记账吗
  • 保税区内企业出口
  • 企业股东变更需要哪些手续
  • 增值税先征后退属于政府补助吗
  • 预收的销售商品货款通过什么科目核算
  • 领备用金时会计怎么做账
  • 产品检测步骤
  • 进项税额暂不转出情况说明怎么写
  • 当月凭证做完怎么结转?
  • 以前年度损益的一级科目
  • 抵扣给供货商预缴税款
  • 失控票要在抵扣当月转出吗
  • cpu天梯图,最新
  • 增值税发票怎么抵税
  • 丢失增值税专用发票最新规定
  • php调用图片
  • php函数传递参数方式
  • 防伪税控服务费怎么交
  • 相见恨晚求下联
  • 本年利润的会计科目
  • 已知税额和不含税额求税率
  • fmt println
  • index.php怎么修改
  • 购进原材料款项未付应编制什么凭证
  • 融资租赁首付租金会计账务处理
  • ps怎么移动某个图案
  • 延迟开票如何规避风险
  • 银行存款转银行存款 什么凭证
  • dedecms都能做什么网站
  • 企业申请进出口权经营范围
  • 其他货币资金是什么科目
  • 即征即退 条件
  • 小规模纳税人增值税申报表怎么填
  • 个体工商户生产经营所得税税率表
  • 高企数据造假
  • 运输费用如何做账
  • 哪些固定资产不会随着时间的流逝贬值
  • 工地加油
  • 建筑图纸设计费多少钱
  • 营业外支出明细账应该采用的格式是
  • 银行承兑汇票的好处
  • 开出口未开出口怎么办
  • mysql5.5.27安装教程与配置
  • winxp开机提示explorer.exe
  • 系统自动设置网络连接
  • 系和系怎么区分
  • 乌班图系统切换root
  • 怎么取消win8.1开机密码
  • linux桌面设置界面在哪
  • win8如何进行系统还原
  • qt渲染机制
  • jquery弹出div窗口
  • 批处理文件教程
  • javascriptfor循环九九乘法表
  • pycharm配置pyqt
  • JavaScript中的NaN代表什么
  • javascript概述
  • python入门小程序编写
  • 服务端测试是什么意思
  • 梦见擦窗户框
  • js常用继承
  • js怎么拿到表单提交数据
  • jquery动态添加的元素怎么添加事件
  • jquery加载中
  • 企业所得税季度申报时间
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设