广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue中的Key值重复问题
  • 533
分享到

vue中的Key值重复问题

2024-04-02 19:04:59 533人浏览 八月长安
摘要

目录关于Key值重复问题v-for key值重复报错关于Key值重复问题 今天用jeecg-boot 做从页面传时间到modal表格中查询数据时报错,只要后台多表连接另一个时间表前端

关于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的唯一性 

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。 

--结束END--

本文标题: vue中的Key值重复问题

本文链接: https://www.lsjlt.com/news/145348.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue中的Key值重复问题
    目录关于Key值重复问题v-for key值重复报错关于Key值重复问题 今天用jeecg-boot 做从页面传时间到modal表格中查询数据时报错,只要后台多表连接另一个时间表前端...
    99+
    2022-11-13
  • 基于javaHashMap插入重复Key值问题
    目录java HashMap插入重复Key值put方法实现引用对象作为keys的唯一性HashMap解决key值相同问题总结java HashMap插入重复Key值 要在HashMa...
    99+
    2023-03-22
    java HashMap Key HashMap插入重复Key值 java HashMap重复Key值
  • 基于java HashMap插入重复Key值问题怎么解决
    这篇“基于java HashMap插入重复Key值问题怎么解决”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“基于j...
    99+
    2023-07-05
  • java8toMap问题(key重复如何解决)
    目录java8 toMap(key重复解决)Collectors.toMap的key重复解决方案一解决方案二java8 toMap(key重复解决) 使用stream的toMap()...
    99+
    2022-11-13
  • vue中的传值及赋值问题
    目录vue的传值及赋值先看一下场景解决方法vue的赋值小技巧严谨代码undefined判断vue的传值及赋值 作为Vue非资深的学习者,在工作中使用vue的时候还是遇见的很多所谓的坑...
    99+
    2022-11-13
  • 解决redis批量删除key值的问题
    目录遇到的问题:解决办法:原理解析:补充知识:遇到的问题: 在开发过程中,会遇到要批量删除某种规则的key,例如login_logID(ID为变量),现在需要删除"logi...
    99+
    2022-11-13
  • 解决@CachePut设置的key值无法与@CacheValue的值匹配问题
    目录@CachePut设置的key值无法与@CacheValue的值匹配缓存注解key的基本数据类型要求必须要统一Spring-Cache key设置注意事项1、基本形式2、组合形式...
    99+
    2022-11-12
  • redis批量删除key值的问题怎么解决
    这篇文章主要讲解了“redis批量删除key值的问题怎么解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“redis批量删除key值的问题怎么解决”吧!遇到的问题:在开发过程中,会遇到要批量...
    99+
    2023-06-29
  • vue中的传值及赋值问题怎么解决
    这篇文章主要介绍“vue中的传值及赋值问题怎么解决”,在日常操作中,相信很多人在vue中的传值及赋值问题怎么解决问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue中的传值及赋值问题怎么解决”的疑惑有所帮助!...
    99+
    2023-06-30
  • 解决使用stream将list转map时,key重复导致报错的问题
    要将List对象集合转为map集合,可以通过stream流的形式快速实现转换: //三个Users对象组成一个List集合 List<Users> list = ne...
    99+
    2022-11-12
  • MySQL自增列的重复值问题(r12笔记第25天)
       如果需要把一台MySQL中的数据定期归档到另外一台MySQL历史库中,那么很可能会发现会有重复值的问题,导致数据导入会失败,而这个问题其实是和自增列的重复值有关,我们来简单看看...
    99+
    2022-10-18
  • 如何解决@CachePut设置的key值无法与@CacheValue的值匹配问题
    这篇文章主要介绍如何解决@CachePut设置的key值无法与@CacheValue的值匹配问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!@CachePut设置的key值无法与@CacheValue的值匹配缓存注...
    99+
    2023-06-22
  • Ant Design of Vue select框获取key和name的问题
    目录Ant Design of Vue select框获取key和name我的记录Ant Design Vue使用select出现的问题1.select下拉菜单滚动条滚动后,自动弹回...
    99+
    2022-11-13
  • 如何解决使用stream将list转map时key重复导致报错的问题
    这篇文章将为大家详细讲解有关如何解决使用stream将list转map时key重复导致报错的问题,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。要将List对象集合转为map集合,可以通过stream流的形...
    99+
    2023-06-15
  • Vue路由重复点击报错问题及解决
    目录vue路由重复点击时会出现报错局部处理全局处理vue 重复点击菜单,路由重复报错解决报错原因解决方法总结vue路由重复点击时会出现报错 Uncaught (in promise)...
    99+
    2023-05-14
    Vue路由 路由重复点击报错 路由重复点击
  • vue中v-for指令的key值可以是index吗
    本篇内容介绍了“vue中v-for指令的key值可以是index吗”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!为什么 v-for 的 ke...
    99+
    2023-06-28
  • vue项目watch内的函数重复触发问题的解决
    目录问题描述:解决方法1解决方法2问题描述: 有两个页面A和B,每个页面里都有一个getList()方法。这个两个方法都需要传一个相同的参数C,参数C的选择过程又比较麻烦。为了避免...
    99+
    2022-11-12
  • redis中热key问题的解决方法
    这篇文章主要介绍了redis中热key问题的解决方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。正文热Key问题上面提到,所谓热key问题...
    99+
    2022-10-18
  • vue的指令和插值问题汇总
    目录一、安装vue二、Vue模板案例步骤三、基础模板(记住)四、vue的指令和插值1、{{}}:插值表达式的语法2、v-text:填充纯文本内容(data中的值)3、v-html:填...
    99+
    2022-11-13
    vue指令和插值 vue指令
  • vue如何处理防止按钮重复点击问题
    目录处理防止按钮重复点击vue防止重复执行点击事件方法一:在规定时间内将按钮禁用的方法方法二:用指令的方式实现,全局注册 处理防止按钮重复点击 1.在button上绑定动态...
    99+
    2022-11-13
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作