报错: Duplicate keys detected 重复key报错问题

news/2024/7/10 0:45:47 标签: vue, elementui, 前端

错误描述:Duplicate keys detected. This may cause an update error.
错误直译:检测到重复的键。这可能会导致错误。
错误原因:有相同父元素的多个子元素的v-for有相同的key值。

<div class="list">
	<span v-for="(item, index) in dataList" :key="index">{{item.name}}</span>
	<span v-for="(item, index) in dataList2" :key="index">{{item.name}}</span>
</div>

因为这里我们遍历使用的key是它的 index ,也就是它的索引 0,1,2 ,所以共有2对 0,1,2 这样的index ,就出现重复了。
解决方法:
1、修改一下key值

<div class="list">
	<!-- key值为0,1,2 -->
	<span v-for="(item, index) in dataList" :key="index">{{item.name}}</span>
	<!-- 修改其中一个key值 -->
	<!-- key值为a0,a1,a2 -->
	<span v-for="(item, index) in dataList2" :key="'a'+index">{{item.name}}</span>
</div>

2、将它们放到不同的父元素下

<span v-for="(item, index) in dataList" :key="index">{{item.name}}</span>
<div class="my-box">
    <span v-for="(item, index) in dataList2" :key="index">{{item.name}}</span>
</div>

总结:
有相同父元素的子元素的key必须保持唯一性,重复的key会造成渲染错误。
要保持key的唯一性,一般使用唯一标识 id 来作为key。


http://www.niftyadmin.cn/n/5328904.html

相关文章

guns项目 Failed to register @ServerEndpoint class 问题

问题发生所在 socket-business-websocket-7.2.4.jar tomcat发布测试的时候报Failed to register ServerEndpoint class &#xff0c;查询jar报主要是WebSocketServer 类加载有问题&#xff0c;把jar报中该类注掉&#xff0c;重新实现这个类&#xff0c;删除Component注解问题&…

Redis提供了哪几种持久化方式?

Redis 提供了2个不同形式的持久化方式。 RDB &#xff08;Redis DataBase&#xff09; AOF &#xff08;Append Of File&#xff09; 一、RDB &#xff08;Redis DataBase&#xff09; 在指定的时间间隔内将内存中的数据集快照写入磁盘&#xff0c;也就是行话讲的Snapshot快…

高可用架构去中心化重要?

1 背景 在互联网高可用架构设计中&#xff0c;应该避免将所有的控制权都集中到一个中心服务&#xff0c;即便这个中心服务是多副本模式。 对某个中心服务&#xff08;组件&#xff09;的过渡强依赖&#xff0c;那等同于把命脉掌握在依赖方手里&#xff0c;依赖方的任何问题都可…

NFS网络共享存储服务技术攻略

目录 一.NFS 1.定义 2.特点 3.原理 二.服务端NFS配置文件 1.主配置文件 2.文件格式 3.相关命令 三.实验&#xff1a;NFS共享存储服务配置 1.服务端安装nfs-utils和rpcbind软件包 2.服务端新建共享目录给权限 3.服务端修改配置文件/etc/exports 4.服务端关闭防火墙…

工智能基础知识总结--特征工程之降维算法

数据降维简介 数据降维即对原始数据特征进行变换,使得特征的维度减少。 依据降维过程是否可以用一个线性变换表示,降维算法可以分为线性降维算法和非线性降维算法,下图展示了各种降维算法及其类别: 降维的必要性: 多重共线性和预测变量之间相互关联。多重共线性会导致解空…

web练习2

需求 1.计算用户指定的数值内的奇数和。例如用户输入的是10则计算13579的和 <!doctype html> <html lang"en"> <head><meta charset"utf-8"><title>作业1</title></head> <body> <script>//计算用…

2024年1月15日

1、桌面应用用到系统本身api 1. 文件系统&#xff08;File System&#xff09;&#xff1a; 使用 Node.js 的 fs 模块来进行文件系统操作&#xff0c;读写文件&#xff0c;创建文件夹等。 2. 操作系统信息&#xff08;Operating System Information&#xff09;&#xff1a; 使…

linux 操作系统中出现 /usr/bin/ld: 找不到 -lstdc++

1. 如果是ubuntu操作系统&#xff0c;首先使用apt-get 进行安装libstdc。 sudo apt-get install libstdc6 2.使用链接的方式进行指定目录下 sudo ln -s /usr/lib/x86_64-linux-gnu/libstdc.so.6 /usr/lib/x86_64-linux-gnu/libstdc.so 3.切记不要进行使用mv 命令或者其它…