vue key值的重复键问题报错
1.问题描述:在vue2.0+ 中做一个公用的评论组件,:key使用的时创建评论的时间,当加载更多的时候,会报错:
Duplicate keys detected: '2019-01-24T07:15:35.000Z'.This may cause an update error.
2. 出问题的代码部分:
<li v-for="(item, i) in cmtList" :key="item.createTime"></li>
3. 分析问题:
由于多人可以同时发表评论,如果是时间完全相同就会出现这样的警告!!!
不同的v-for循环使用了相同的key值造成了这个警告,为了避免由于相同的key值造成的警告,可以使用以下方法:
<div v-for="(item, i) in items" :key="i"></div> <div v-for="(item, i) in items2" :key="'A'+ i"></div> <div v-for="(item, i) in items3" :key="'B',+ i"></div> //这里例子中的 A,B 字符可以替换成你自己定义的任意字符,只是为了保证key的唯一性
4. 备注
参考:https://stackoverflow.com/questions/51086657/vue-warn-duplicate-keys-detected-x-this-may-cause-an-update-error
vue key值的重复键问题报错的更多相关文章
- java中key值可以重复的map:IdentityHashMap
在Java中,有一种key值可以重复的map,就是IdentityHashMap.在IdentityHashMap中,判断两个键值k1和 k2相等的条件是 k1 == k2 .在正常的Map 实现(如 ...
- Java集合篇六:Map中key值不可重复的测试
package com.test.collection; import java.util.HashMap; import java.util.Map; //Map中key值不可重复的测试 publi ...
- vue项目初始化时npm run dev报错webpack-dev-server解决方法
vue项目初始化时npm run dev报错webpack-dev-server解决方法 原因:这是新版webpack存在的BUG,卸载现有的新版本webpack,装老版本就好webpack-dev- ...
- 关于vue,webpack 中 “exports is not defined”报错
vue项目npm run dev 后项目报错 : 提示 “exports is not defined”. 导致这个问题是因为balbel的配置文件.babelrc的问题: { "prese ...
- 解决:mysql5.7 timestamp默认值0000-00-00 00:00:00 报错
解决:mysql5.7 timestamp默认值0000-00-00 00:00:00 报错 学习了:https://www.cnblogs.com/cnhkzyy/p/9119339.html se ...
- vue.js 中使用(...)运算符报错的解决方法
vue.js 中使用(...)运算符报错的解决方法 Syntax Error:Unexpected token(XX:X) }, computed:{ ...mapGetters([ 'pageSiz ...
- 在运行vue项目时,执行npm install报错小记
在运行vue项目时,执行npm install 报错,导致后续的执行报各种错误,根据报错,尝试了网上的各种办法,最后发现时网络问题下载失败导致,解决办法: 安装cnpm==>npm instal ...
- vue中watch的用法总结以及报错处理Error in callback for watcher "checkList"
首先确认 watch是一个对象,一定要当成对象来用. 对象就有键,有值. 键:就是你要监控的那个家伙,比如说$route,这个就是要监控路由的变化,或者是data中的某个变量. 值可以是函数:就是当你 ...
- vue、vuex、iview、vue-router报错集锦与爬坑记录
1.vue报错: 没安装 less-loader css-loader style-loader 可能的很大原因:没安装less 2.vuex报错:Computed property &qu ...
随机推荐
- 图像处理之图像增强项目---csdn去雾专栏1
(一)高斯低通滤波去噪 高斯低通滤波器(Gaussian Low Pass Filter)是一类传递函数为高斯函数的线性平滑滤波器.又由于高斯函数是正态分布的密度函数.因此高斯低通滤波器对于去除服从正 ...
- (转)c#(wince)中使用多线程访问winform中控件的问题
我们在做winform应用的时候,大部分情况下都会碰到使用多线程控制界面上控件信息的问题.然而我们并不能用传统方法来做这个问题,下面我将详细的介绍. 首先来看传统方法: public partial ...
- EasyDarwin开源手机直播方案:EasyPusher手机直播推送,EasyDarwin流媒体服务器,EasyPlayer手机播放器
在不断进行EasyDarwin开源流媒体服务器的功能和性能完善的同时,我们也配套实现了目前在安防和移动互联网行业比较火热的移动端手机直播方案,主要就是我们的 EasyPusher直播推送项目 和 Ea ...
- objective-c的代码块block
一.block 1.bock是由于^开头,括号里面填写参数类型. 标准代码块: 返回值 (^代码块名称) (参数类型) = ^(参数) {方法体}; 2.我们的块即可以定义在函数内或者对象 ...
- (linux)idr(integer ID management)机制
最近研究进程间通信,遇到了idr相关的函数,为了扫清障碍,先研究了linux的idr机制. IDR(integer ID management)的要完成的任务是给要管理的对象分配一个唯一的ID,于 ...
- HDU4565 So Easy! —— 共轭构造、二阶递推数列、矩阵快速幂
题目链接:https://vjudge.net/problem/HDU-4565 So Easy! Time Limit: 2000/1000 MS (Java/Others) Memory L ...
- ES6 对Math对象的扩展
Math 对象的扩展 Math.trunc() Math.trunc(4.1) // 4 Math.trunc(4.9) // 4 Math.trunc(-4.1) // -4 Math.trunc( ...
- HTML5 Canvas 自定义笔刷
1. [图片] QQ截图20120715095110.png 2. [代码][HTML]代码 <!DOCTYPE html><html lang="en" & ...
- testing
doctest_test.py def square(x): ''' 这里需要空格 >>> square(2) 4 啦啦 >>> square(3) 9 上不一行能 ...
- BZOJ_3545_[ONTAK2010]Peaks_主席树+倍增+kruscal重构树+dfs序
BZOJ_3545_[ONTAK2010]Peaks_主席树+倍增+kruscal重构树 Description 在Bytemountains有N座山峰,每座山峰有他的高度h_i.有些山峰之间有双向道 ...