当前位置: 首页 > news >正文

vue - [Vue warn]: Duplicate keys detected: ‘0‘. This may cause an update error.

问题描述:
vue项目中,对表单数组赋值时,控制台抛出警告:
在这里插入图片描述

问题代码:
在这里插入图片描述
问题分析:
1、Vue 要求每个虚拟 DOM 节点必须有唯一的 key。该警告信息通常出现在使用v-for循环的场景中,多个同级节点使用了相同的key作为唯一标识,导致Vue无法识别。
2、问题代码中,外层表单el-form中,有两个同级的el-row列表,在对el-form进行赋值时,同时会对内层的这两个el-row列表进行赋值;此时这两个列表的元素,都使用了index,也就是列表的索引作为key,就会出现两个列表的第一个元素的key都是0,第二个元素的key又都是1。。。依次类推,不同的元素使用相同的key,就会出现冲突,从而产生了报警。

解决方法:
在使用v-for循环时,使用真正能够唯一标识元素的特征作为key,如下图:
在这里插入图片描述
注意:
这里两个列表分别使用了不相干的两个id字段作为元素的key,通常来说是没有问题的;但是如果有两行数据,一个使用的 payPlanId 是1001,而另一个使用的 relationId 恰好也是1001,此时仍然会触发警告。
所以判断是否重复key,不仅仅是key所使用的字段能够区别开,更重要的所产生的实际值不能重复。 如果遇到上述特殊情况产生了警告,可以手动拼接key使其值唯一,比如最后一个el-row,使用 :key=“prRelation-${item.relationId}”。

相关文章:

  • PDF与Markdown的量子纠缠:一场由VLM导演的文档界奇幻秀
  • C语言复习笔记--函数递归
  • Carsim学习笔记(二)
  • Jmeter:常用线程组设置策略
  • 初识 模版 和 STL
  • docker-compose解决容器有时差的问题
  • 【操作系统笔记】操作系统概述
  • Docker 安装 RabbitMQ
  • MySQL数据库中常用的命令
  • 侯捷 C++ 课程学习笔记:由浅入深,步入C++世界大门
  • 北斗导航 | 基于北斗三号短报文通信的北斗-YOLO融合系统原理,算法公式,系统流程框图,matlab代码,应用场景
  • 记录一次Kafka重复消费的问题
  • Mysql并发事务带来哪些问题?
  • Windows 10 系统下配置Flutter开发环境,保姆级教程冢铖2023-02-17 09:56广东
  • 26考研——图_图的基本概念(6)
  • VSCode中操作gitee
  • R语言ggplot2散点形状和填充
  • C++语法学习的主要内容
  • Spring 循环依赖
  • python并发爬虫
  • 购物网站建设要多少钱/电商网站建设 网站定制开发
  • 彩票网站 在哪里做/广告推广渠道有哪些
  • 秦皇岛网站制作代理商/百度网站管理员工具
  • 移动端下拉框价威cj111602推广/长沙seo优化首选
  • 网站登录后台地址/做个小程序需要花多少钱
  • 重庆网站建设 微客巴巴/关键词排名优化工具