vue中的Key值重复问题
短信预约 -IT技能 免费直播动态提醒
关于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的唯一性
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
