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

  • 粤康码狮子头是什么意思(粤康码狮子头头像)

    粤康码狮子头是什么意思(粤康码狮子头头像)

  • 麒麟9000 4g版和5g版有什么不同(麒麟90004g版和5g版性能)

    麒麟9000 4g版和5g版有什么不同(麒麟90004g版和5g版性能)

  • 魅族mx3配置(魅族mx3怎么样)(魅族mx3hifi)

    魅族mx3配置(魅族mx3怎么样)(魅族mx3hifi)

  • ipad2021支持多少w快充(ipad2020支持多少w)

    ipad2021支持多少w快充(ipad2020支持多少w)

  • 付费音乐包能听vip歌曲吗(付费音乐包能听什么歌)

    付费音乐包能听vip歌曲吗(付费音乐包能听什么歌)

  • 红米10x支持nfc功能吗(红米10x是否支持nfc)

    红米10x支持nfc功能吗(红米10x是否支持nfc)

  • iphonex储存空间其他是什么(iphonex储存空间加载慢)

    iphonex储存空间其他是什么(iphonex储存空间加载慢)

  • 智能卡通信失败

    智能卡通信失败

  • start windows normally是什么意思(start windows normally后黑屏)

    start windows normally是什么意思(start windows normally后黑屏)

  • 快手垂直度能改过来么(快手改垂直度了,没有之前的播放量高,怎么办)

    快手垂直度能改过来么(快手改垂直度了,没有之前的播放量高,怎么办)

  • 腾讯会议可以后台播放吗(什么是腾讯会议)

    腾讯会议可以后台播放吗(什么是腾讯会议)

  • ps ctrl+t没反应(ps ctrl+j没反应)

    ps ctrl+t没反应(ps ctrl+j没反应)

  • 华为畅享10plus耗电快怎么办(华为畅享10plus耗电吗)

    华为畅享10plus耗电快怎么办(华为畅享10plus耗电吗)

  • 手机黑屏是内屏坏了还是外屏(手机黑屏是内屏坏了吗)

    手机黑屏是内屏坏了还是外屏(手机黑屏是内屏坏了吗)

  • 家里网线口不通怎么办(家里网线插口用不了)

    家里网线口不通怎么办(家里网线插口用不了)

  • 删除温控会有什么后果(删除温控会有什么影响)

    删除温控会有什么后果(删除温控会有什么影响)

  • 物联卡停机多久注销(物联卡停机后咋恢复)

    物联卡停机多久注销(物联卡停机后咋恢复)

  • ctrl+b是什么快捷键(ctrl+a什么快捷键)

    ctrl+b是什么快捷键(ctrl+a什么快捷键)

  • 小米之家怎么取消预约(小米之家怎么取消授权门店)

    小米之家怎么取消预约(小米之家怎么取消授权门店)

  • 路由器的上网账号和口令是什么(路由器的上网账号是什么意思)

    路由器的上网账号和口令是什么(路由器的上网账号是什么意思)

  • 苹果8plus屏幕尺寸(苹果8plus屏幕尺寸和14pro对比)

    苹果8plus屏幕尺寸(苹果8plus屏幕尺寸和14pro对比)

  • word2007页脚页码设置(word2007页眉页脚怎么设置)

    word2007页脚页码设置(word2007页眉页脚怎么设置)

  • wps文档怎么查找关键字(wps文档怎么查找人名)

    wps文档怎么查找关键字(wps文档怎么查找人名)

  • 物联网的定义是什么(物联网的定义是什么?物联网的提出有什么意义?)

    物联网的定义是什么(物联网的定义是什么?物联网的提出有什么意义?)

  • 微信自动运行在哪设置(微信自动运行在哪里关闭)

    微信自动运行在哪设置(微信自动运行在哪里关闭)

  • 怎么设置手机停机(怎么设置手机停机铃声)

    怎么设置手机停机(怎么设置手机停机铃声)

  • php自动加载机制是什么(php自动加载函数)

    php自动加载机制是什么(php自动加载函数)

  • 帝国cms模板开发常用技巧总结(帝国cms模型)

    帝国cms模板开发常用技巧总结(帝国cms模型)

  • 离职员工奖金发放规定
  • 发票已经报送怎么处理
  • 出口专用发票应在哪里开
  • 国际船舶代理是什么意思
  • 合同解除收取对方的违约金交什么税
  • 出纳人员应该怎么称呼
  • 现金折扣税前扣除
  • 建筑工程地址
  • 注销地税需要什么资料
  • 营改增安装服务费税率
  • 关于支付税审费的问题
  • 发票对方已认证怎么冲红
  • 外购产品用于赠送帐务处理
  • 小额零星业务上限是多少
  • 售后回购的实质
  • 金税服务费会计分录
  • 个税如何绑定新公司
  • 税务登记证遗失了怎么注销
  • 利润表中哪些属于营业外收入
  • 个人所得税和企业所得税都要交吗
  • 分配的水电费属于什么会计要素
  • php有啥用
  • wifi密码忘记了怎么重新设置密码
  • php的超级全局变量
  • 东京塔的意义
  • php strlen 中文
  • 用人单位如何缴纳医疗保险
  • php数组按照某个字段排序
  • thinkphp案例
  • 公司给员工的购房补贴
  • swift 协议扩展
  • 新公司固定资产怎么登记
  • 资产负债表其他应收款计算公式
  • 未缴足注册资本
  • 企业所得税应纳税额的计算公式
  • 资产计税基础填资产原值吗
  • 怎么开电子专用增值税发票
  • phpcms目录结构
  • 技术开发费免税政策
  • 现金流量表怎么填写
  • 金蝶怎么增加职员
  • 在建工程什么时候结转
  • 个体工商户要做账报税吗
  • 低值易耗品摊销表格
  • 预付工程款会计分录
  • 长期股权投资转让会计处理
  • 代开租金发票的税金怎样入账?
  • 退差价后退货
  • 产品生产完工入库
  • 跨月的发票开错了该怎么办?
  • 行政事业单位负责人应当对本单位内部控制
  • 企业支付的技术转让费计入管理费用吗
  • linux 解析
  • 如何用u盘装系统 知乎
  • linux中的find的用法
  • mac os xv10.11
  • centos 安装教程
  • mac上安装
  • win7电脑dns错误不能上网怎么办
  • 在linux中使用什么可以执行shell脚本
  • win8 embedded
  • win7怎么录屏为什么不是视频
  • cocos2d-x教程
  • 好好了解 英文
  • shell脚本 if -e
  • 分离与继承的思想是什么
  • jquery ztree api
  • pycharm打开文件怎么运行
  • js设计模式书
  • Python 数据清洗
  • jquery操作文本可以使用什么方法
  • 权限android.permission.write
  • javascript 自定义类
  • 河南12306区号
  • 江苏国税,地税怎么交
  • 四川省网上税务局怎么登录
  • 广西纳税申报流程
  • 北京社保登记证怎么办
  • 从国外网购东西回来要交税吗
  • 上海各区财政收入
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设