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的唯一性
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在本篇文章里小编给大家整理的是关于VUE 项目初建和常见问题以及相关知识点内容，有需要的朋友们学习下。2019-09-09
这篇文章主要介绍了el-table树形数据量过大,导致页面卡顿问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
在本文中，将向你展示5个特性，你可以通过 Vuex 插件轻松地添加到下一个项目中。一起来学习下。2017-11-11
这篇文章主要介绍了在vue中created、mounted等方法使用小结，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了.eslintrc配置目录及配置项的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要为大家详细介绍了vue实现选项卡案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
vue2结合element-ui的gantt图实现可拖拽甘特图
因为工作中要用到甘特图,所以我在网上搜索可以用的甘特图,搜索了好多,但是网上搜到大多数都很鸡肋,不能直接使用,下面这篇文章主要给大家介绍了关于vue2结合element-ui的gantt图实现可拖拽甘特图的相关资料,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了Vue 如何追踪数据变化，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-04-04
这篇文章主要介绍了uniapp和vue的区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-10-10
这篇文章主要为大家详细介绍了如何通过Vue实现自定义视频和图片上传的功能，文中的示例代码简洁易懂，感兴趣的小伙伴可以跟随小编一起学习一下2023-04-04
最新评论