vue中的Key值重复问题
更新时间：2022年04月08日 10:53:34 作者：搬砖小生
这篇文章主要介绍了vue中的Key值重复问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
关于Key值重复问题
今天用jeecg-boot 做从页面传时间到modal表格中查询数据时报错，只要后台多表连接另一个时间表前端就报错，显示key值重复。
下面展示一些 报错信息。
Duplicate keys detected: ‘1’. This may cause an update error.
网上百度后显示我 table表格的key重复了 ，
然后我改了 rowKey 给他加了唯一标识 rowKey=“id+‘s’” 后就不再重复了，但是在查询的时候又出来另一个错，没条数据都要有同样的Key值，于是我再初始加载的方法里加了下面展示一些 内联代码片。
created() {
data.forEach((item, index) => {
item.key = index + 1;
})
}
但是这样就会显示data找不到 dataSource 在jeecgboot中是封装了的所以得把方法拿到页面上来。
我试了许久无果后，就看了看数据库才发现数据库id 因为我查时间的原因很多重复，于是我做了按时间一个分组发现就不报错了。
v-for key值重复报错
<li
v-for="(item,i) in infoDatac.notice.admitted"
:key="'A'+ i"
>
<div>申请单号：{{ item.applyCode }}</div>
<div>使用时间：{{ item.useTime }}</div>
<span>{{ item.title }}</span>
</li>
<li
v-for="(item,i) in infoDatac.notice.waybillTimeout"
:key="'B'+ i"
>
<div>运单号：{{ item.waybillCode }}</div>
<div>申请单号：{{ item.applyCode }}</div>
<div>物料名称：<span class="tooltip short">
<Tooltip :content="item.materialName" placement="top">
{{ item.materialName }}
</Tooltip></span
></div>
<div>所超时长：{{ item.timeOut }}</div>
<span>{{ item.title }}</span>
</li>这里例子中的 A,B 字符可以替换成你自己定义的任意字符，只是为了保证key的唯一性
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Element-ui DatePicker日期选择器基础用法示例
这篇文章主要为大家介绍了Element-ui DatePicker日期选择器基础用法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
今天我们来学习一下watch侦听器的好兄弟 watchEffect 侦听器。这个相对来说比较简单，用的不是很多，当然了，根据自己的项目情况自行决定使用，希望对大家有所帮助2022-07-07
在vuex的时候刷新以后里面存储的state就会被浏览器释放掉,因为我们的state都是存储在内存中的,所以一刷新页面就会把state中的数据重置,这就涉及到vue数据持久化的问题,这篇文章主要给大家介绍了关于vuex数据持久化的两种实现方案,需要的朋友可以参考下2021-07-07
这篇文章主要为大家详细介绍了vue3.0实现下拉菜单的封装代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了vue动态添加表单validateField验证功能实现,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
vue3配置permission.js和router、pinia实现路由拦截的简单步骤
这篇文章主要介绍了如何在场景网站中实现对未登录用户访问的拦截,通过配置Pinia,创建一个user.js文件来存储用户数据,并在main.js中进行配置,同时通过在router目录下创建permission.js文件,可以实现对未登录用户的拦截,需要的朋友可以参考下2024-11-11
vue3+elementPlus项目支持生成、设置默认附件方式
这篇文章主要介绍了vue3+elementPlus项目支持生成、设置默认附件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
vue使用$attrs和$listeners多级组件嵌套传递数据
这篇文章主要为大家介绍了vue使用$attrs和$listeners多级组件嵌套传递数据示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
最近做的两个项目都是关于vue的,做完整理一下,这篇文章主要给大家介绍了关于如何用vue实现一个有趣的围绕圆弧动画效果的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
在Vue.js这个现代化的前端框架中,组件化是其核心理念之一,正确的组件间通信是实现高效和可维护代码的关键,在许多应用程序中,父子组件之间的事件传递是一个常见的需求,,本文将深入探讨在Vue中如何实现父子组件的事件传递,并辅以示例代码来展示这些概念2025-01-01
最新评论