vue中的Key值重复问题

目录
  • 关于Key值重复问题
  • v-for 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的唯一性

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决vue v-for 遍历循环时key值报错的问题

    一 .问题如下: [Vue warn] Avoid using non-primitive value as key, use string/number value instead. non-primitive表示的是对象 这里的[Vue warn]是指不要用对象或是数组作为key,用string或number作为key. :key相当于是索引的作用,提高循环性能,如果循环量较小,不写也可以的. 以上这篇解决vue v-for 遍历循环时key值报错的问题就是小编分享给大家的全部内容了,希望能

  • 详解如何理解vue的key属性

    如果没有这个属性的时候vue应用 in-place patch(就地复用)策略.列表里的顺序发生改变的时候比如shuffle(列表打乱)的时候,vue为了提升性能,不会移动dom元素,只是更新相应元素的内容节点. 就地复用的弊端 这个默认的模式是高效的,但是只适用于不依赖子组件状态或临时 DOM 状态 (例如:表单输入值) 的列表渲染输出. 如上引用自官网,这个模式就是上面的"就地复用"策略.那么是不是依赖子组件状态的列表渲染采用上面的模式就出问题了呢.如下测试代码: <ul&g

  • 详解vue中v-for的key唯一性

    详解vue中v-for的key唯一性

    1. DOM Diff 要想真正了解 key 属性的存在意义,还真得从 DOM Diff 说起,并不需要深入了解 DOM Diff 的原理,而是仅仅需要知道 DOM Diff 的工作过程即可. Vue 和 React 都采用了运用虚拟 DOM 的方式减少浏览器不必要的渲染.由于 Vue 和 React 采用的都是 v = render( m ) 的方式渲染视图的,当 model 数据发生变化时,视图更新的方式就是重新 render DOM 元素.但是有时候我们只是改变了一个组件中的某一个 div

  • Vue中的v-for循环key属性注意事项小结

    当Vue用 v-for 正在更新已渲染过的元素列表是,它默认用"就地复用"策略.如果数据项的顺序被改变,Vue将不是移动DOM元素来匹配数据项的改变,而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素. 为了给Vue一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性.key属性的类型只能为 string或者number类型. 在下面这个例子中,如果不给 p 元素绑定key,我先选中第一个, 然后输入ID和Nam

  • vue中的Key值重复问题

    vue中的Key值重复问题

    目录 关于Key值重复问题 v-for key值重复报错 关于Key值重复问题 今天用jeecg-boot 做从页面传时间到modal表格中查询数据时报错,只要后台多表连接另一个时间表前端就报错,显示key值重复. 下面展示一些 报错信息. Duplicate keys detected: ‘1’. This may cause an update error. 网上百度后显示我 table表格的key重复了 , 然后我改了 rowKey 给他加了唯一标识 rowKey=“id+‘s’” 后就不

  • 替换python字典中的key值方法

    比如有一个 a = {'a': 1} 希望变为 a = {'b' :1} 即:在保留value不变的情况下,替换key值 目前能想到的实现方案是 a['b'] = a.pop('a') 以上这篇替换python字典中的key值方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 如何正确理解vue中的key详解

    就目前所了解的情况,key的作用有以下这些. v-for遍历时,用id,uuid之类作为key,唯一标识节点加速虚拟DOM渲染 响应式系统没有监听到的数据,用+new Date()生成的时间戳作为key,手动强制触发重新渲染 场景一大同小异司空见惯,场景二是下面这样的: <div :key="rerender"> <span>Hello Vue.js !</span> <complexComponent :propObj="propO

  • 在vue中对数组值变化的监听与重新响应渲染操作

    在我们项目开发过程中,实例中的数据类型可以是对象.数组等.在对象中,某个属性值发生更改时,我们可以通过对象的深度监听,以达到重新渲染页面的需求.或者查阅这篇文章 例如: <script> export default { data(){ return { objVal: { name: 'obj', type: 'obj' } } }, watch:{ objVal:{ handler(val,oldval){ }, deep: true, } }, methods:{ changeObj()

  • 详解为什么Vue中不要用index作为key(diff算法)

    前言 Vue 中的 key 是用来做什么的?为什么不推荐使用 index 作为 key?常常听说这样的问题,本篇文章带你从原理来一探究竟. 另外本文的结论对于性能的毁灭是针对列表子元素顺序会交换.或者子元素被删除的特殊情况,提前说明清楚,喷子绕道. 本篇已经收录在 Github 仓库,欢迎 Star: https://github.com/sl1673495/blogs/issues/39 示例 以这样一个列表为例: <ul> <li>1</li> <li>

  • python 提取tuple类型值中json格式的key值方法

    标题比较麻烦,都有些叙述不清:昨天下午在调试接口框架的时候,遇到了一个问题是这样的: 使用python 写了一个函数,return 了两个返回值比如 return a,b 于是返回的a,b 是tuple类型,比如值是actual.那么,得到a,b分别是actual[0] ,actual[1]这样的.而目前,actual[0]的值是这样的: {"code":"m0001","result":True} ,但是我想得到code的key值 m0001

  • Ant design vue中的联动选择取消操作

    项目中会遇到需求就是table表格中选中在侧边展示,侧边删除,table中选中取消的联动选中 ui框架:Ant design vue 组件:table 和 tag html中 <template v-for="tag in dataType"> <!-- key不能使用index --> <a-tag :key="tag.id" closable :afterClose="() => deleteDataType(tag

  • Vue中强制组件重新渲染的正确方法

    有时候,依赖 vue 响应方式来更新数据是不够的,相反,我们需要手动重新渲染组件来更新数据.或者,我们可能只想抛开当前的DOM,重新开始.那么,如何让vue以正确的方式重新呈现组件呢? 强制 Vue 重新渲染组件的最佳方法是在组件上设置:key. 当我们需要重新渲染组件时,只需更 key 的值,Vue 就会重新渲染组件. 这是一个非常简单的解决方案. 当然,你可能会对其他方式会更感兴趣: 简单粗暴的方式:重新加载整个页面 不妥的方式:使用 v-if 较好的方法:使用Vue的内置forceUpda

  • 在Map中实现key唯一不重复操作

    在Map中实现key唯一不重复操作

    Map中如何实现key唯一不重复 问题:如何做到Map中key唯一不重复,每次都遍历来equals比较吗? 首先,答案是否.如果全部遍历的话,当Map中元素很多的时候,显然查询效率低. 解释: HashMap属于散列存储结构,其table的存储是放在不同的Jvm内存区域.通过一个整型值来标识table的区域,相当于这个区域的下标.然后整个查找过程就从不再需要遍历整个table,只需遍历这一区域的数据即可. 结合HashMap.class中的put方法来说明: 如何找到这个区域呢? 1.首先将传入

  • Vue 中为什么不推荐用index 做 key属性值

    Vue 中为什么不推荐用index 做 key属性值

    目录 前言 key 的作用 key 在 diff 算法中的角色 同步头部节点 同步尾部节点 添加新的节点 删除多余节点 最长递增子序列 为什么不要用 index 性能消耗 数据错位 解决方案 总结 前言 前端开发中,只要涉及到列表渲染,那么无论是 React 还是 Vue 框架,都会提示或要求每个列表项使用唯一的 key,那很多开发者就会直接使用数组的 index 作为 key 的值,而并不知道 key 的原理.那么这篇文章就会讲解 key 的作用以及为什么最好不要使用 index 作为 key

随机推荐