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

  • 电子商务企业怎样做好微博营销?(电子商务企业怎么选择物流模式)

    电子商务企业怎样做好微博营销?(电子商务企业怎么选择物流模式)

  • 小米平板5面部解锁怎么设置(小米平板5有面容解锁)

    小米平板5面部解锁怎么设置(小米平板5有面容解锁)

  • 荣耀30pro怎么开启OTG(荣耀30pro怎么开卡槽)

    荣耀30pro怎么开启OTG(荣耀30pro怎么开卡槽)

  • 微信群能设置头像吗(微信群能否设置头像)

    微信群能设置头像吗(微信群能否设置头像)

  • b站下载的音乐在哪(b站下载的音乐怎么导入qq音乐)

    b站下载的音乐在哪(b站下载的音乐怎么导入qq音乐)

  • 磁盘0磁盘分区1是什么意思(磁盘管理磁盘0磁盘分区1)

    磁盘0磁盘分区1是什么意思(磁盘管理磁盘0磁盘分区1)

  • 快手不支持音乐格式怎么回事(快手音乐不能使用显示不支持音乐格式)

    快手不支持音乐格式怎么回事(快手音乐不能使用显示不支持音乐格式)

  • 华为畅享9s有长截屏吗(华为畅享9s有长焦模式吗)

    华为畅享9s有长截屏吗(华为畅享9s有长焦模式吗)

  • aqmaloo是华为什么型号(华为aqmal00手机是什么手机)

    aqmaloo是华为什么型号(华为aqmal00手机是什么手机)

  • 按住什么键可以多选(按住什么键可以选定多个相邻文件)

    按住什么键可以多选(按住什么键可以选定多个相邻文件)

  • 反转模式在哪里设置(反转模式在哪里打开)

    反转模式在哪里设置(反转模式在哪里打开)

  • 外储存器断电后信息会丢失吗(储存器断电后会丢失的是)

    外储存器断电后信息会丢失吗(储存器断电后会丢失的是)

  • 可选颜色的快捷键(可选颜色快捷键2022)

    可选颜色的快捷键(可选颜色快捷键2022)

  • i7 6700是几核处理器(i7 6700核显相当于什么显卡)

    i7 6700是几核处理器(i7 6700核显相当于什么显卡)

  • oppok1怎么没有重启(oppo手机重启软件没有了怎么恢复)

    oppok1怎么没有重启(oppo手机重启软件没有了怎么恢复)

  • 荣耀20屏幕指纹吗(荣耀20屏幕指纹怎么设置)

    荣耀20屏幕指纹吗(荣耀20屏幕指纹怎么设置)

  • 华为seaal10什么型号(华为sea—al10市面多少钱)

    华为seaal10什么型号(华为sea—al10市面多少钱)

  • 华为云空间卡怎么获得(华为云空间卡在哪里)

    华为云空间卡怎么获得(华为云空间卡在哪里)

  • 电脑版虎牙怎么看直播回放(电脑版虎牙怎么看回放)

    电脑版虎牙怎么看直播回放(电脑版虎牙怎么看回放)

  • 麦克风加强调不了(麦克风增强不能拖动)

    麦克风加强调不了(麦克风增强不能拖动)

  • 华为gt2运动款和时尚款区别(华为GT2运动款和雅致)

    华为gt2运动款和时尚款区别(华为GT2运动款和雅致)

  • iphone自带录屏很模糊(为什么苹果自带录屏功能怎么不清晰)

    iphone自带录屏很模糊(为什么苹果自带录屏功能怎么不清晰)

  • 苹果x怎么换成其他刘海(苹果x怎么换成英文模式)

    苹果x怎么换成其他刘海(苹果x怎么换成英文模式)

  • 蓝牙耳机l和r哪个是左右(蓝牙耳机l和r哪个电量大)

    蓝牙耳机l和r哪个是左右(蓝牙耳机l和r哪个电量大)

  • iphone 双卡如何切换(iphone 双卡如何切换信息)

    iphone 双卡如何切换(iphone 双卡如何切换信息)

  • word 表格怎么跨页(word表格怎么跨页断行)

    word 表格怎么跨页(word表格怎么跨页断行)

  • 快手上特别关注什么意思(快手上特别关注怎么取消掉)

    快手上特别关注什么意思(快手上特别关注怎么取消掉)

  • 按键精灵怎么设置20分钟按一个键(按键精灵怎么设置循环)

    按键精灵怎么设置20分钟按一个键(按键精灵怎么设置循环)

  • spring boot是什么(spring boot干什么的)

    spring boot是什么(spring boot干什么的)

  • 企业所得税广告费30%扣除
  • 一般纳税人公司抵扣
  • 企业变更法人的流程网上申请变更
  • 销售是销项税还是进项税
  • 资金账户托管协议
  • 开发支出在资产负债表是怎
  • 制造费用结转到辅助生产成本
  • 自主研发全流程
  • 期末数减期初数等于
  • 购置办公用品有什么好处
  • 税率变化递延所得税资产如何调整
  • 样机销售是什么意思
  • 代扣代缴的增值税
  • 离职补偿金需要交工会经费吗
  • 减值 计提
  • 印刷费可以开哪些科目
  • 交换房产土地如何交税
  • 出口退税的账务关键是什么
  • 电脑bios启动项设置
  • 商贸公司如何结算成本
  • win10系统更新出现错误代码
  • macbook无法调节音量
  • Remoterm.exe - Remoterm是什么进程 有什么用
  • php字符串函数有哪些
  • 赠送积分有两种形式
  • 差旅费津贴个人所得税题目
  • 股票涨幅公式怎么写
  • 销售返利计入什么费用
  • 更改公司章程发函怎么写
  • 赠送现金券是否违法
  • 法罗群岛知乎
  • 小规模企业购入固定资产怎么做账务处理
  • 采购材料尚未入库款未付的记账凭证
  • yii2实现根据时间搜索的方法
  • 应付职工薪酬是负数是什么意思
  • yolov3图像识别
  • 前端使用vue
  • 投资公司取得的发票
  • ue4ui界面制作
  • 命令行find
  • 个税申报结果查询
  • ps快速选择工具抠图后怎么拉出来
  • 企业用车年检需要什么资料
  • c语言中有哪些语句
  • css隐藏元素的方式
  • 在dedecms中,如何模板建站
  • 织梦商城网站源码
  • 固定资产年限折旧方法
  • 现金股利要交税
  • 煤炭企业所得税税率新疆
  • 企业残障金缴纳标准
  • 金融企业里面的债务
  • 去年亏损今年盈利能分红吗
  • 处置投资性房地产时影响营业成本的金额
  • 营改增之前
  • 怎么打印税务登记证明备案表
  • 应付账款的贷方等于预收账款的借方
  • 房地产企业预收账款
  • 会计学主要是学什么
  • 商业银行的固定资产
  • centos如何禁ping
  • vcpkgsrv.exe是什么进程
  • 如何配置centos7下的apache服务
  • Android性能优化 武汉招聘
  • javascript中有几种数据类型
  • ghost32命令参数
  • div +css
  • 改变图片透明度怎么调
  • My Magic Android Tour —— 处女作
  • unity3d怎么改变物体大小
  • shell脚本判断两个数大小
  • 搭建nodejs项目
  • Unity3D游戏开发(第2版)
  • jquery 插件编写
  • 国家税务总局令第43号公告
  • 安徽农金如何查询开户行
  • 劳务派遣服务计税
  • 个人所得税自行纳税申报表a表填写模板
  • 鲨鱼记账咋记账
  • 开票有什么好处吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设