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值的重复键问题报错的更多相关文章

  1. java中key值可以重复的map:IdentityHashMap

    在Java中,有一种key值可以重复的map,就是IdentityHashMap.在IdentityHashMap中,判断两个键值k1和 k2相等的条件是 k1 == k2 .在正常的Map 实现(如 ...

  2. Java集合篇六:Map中key值不可重复的测试

    package com.test.collection; import java.util.HashMap; import java.util.Map; //Map中key值不可重复的测试 publi ...

  3. vue项目初始化时npm run dev报错webpack-dev-server解决方法

    vue项目初始化时npm run dev报错webpack-dev-server解决方法 原因:这是新版webpack存在的BUG,卸载现有的新版本webpack,装老版本就好webpack-dev- ...

  4. 关于vue,webpack 中 “exports is not defined”报错

    vue项目npm run dev 后项目报错 : 提示 “exports is not defined”. 导致这个问题是因为balbel的配置文件.babelrc的问题: { "prese ...

  5. 解决: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 ...

  6. vue.js 中使用(...)运算符报错的解决方法

    vue.js 中使用(...)运算符报错的解决方法 Syntax Error:Unexpected token(XX:X) }, computed:{ ...mapGetters([ 'pageSiz ...

  7. 在运行vue项目时,执行npm install报错小记

    在运行vue项目时,执行npm install 报错,导致后续的执行报各种错误,根据报错,尝试了网上的各种办法,最后发现时网络问题下载失败导致,解决办法: 安装cnpm==>npm instal ...

  8. vue中watch的用法总结以及报错处理Error in callback for watcher "checkList"

    首先确认 watch是一个对象,一定要当成对象来用. 对象就有键,有值. 键:就是你要监控的那个家伙,比如说$route,这个就是要监控路由的变化,或者是data中的某个变量. 值可以是函数:就是当你 ...

  9. vue、vuex、iview、vue-router报错集锦与爬坑记录

    1.vue报错: 没安装 less-loader css-loader style-loader      可能的很大原因:没安装less 2.vuex报错:Computed property &qu ...

随机推荐

  1. erlang防止反编译

    前面提到了erlang的反编译,下面说下防止反编译: 1)建立~/.erlang.crypt 在编译的用户名的home目录中建立一个加密方法的文件.erlang.crypt,内容如下: [{debug ...

  2. 图像处理之滤波---滤波在游戏中的应用boxfilter

    http://www.yxkfw.com/?p=7810 很有意思的全方位滤波应用 https://developer.nvidia.com/sites/default/files/akamai/ga ...

  3. Clustering of residential areas based on residential conditions

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWFuZ3hpYW5neXVpYm0=/font/5a6L5L2T/fontsize/400/fill/I0 ...

  4. Cena使用

    打开cena,在工具-选项中,修改G++和GCC的编译命令.格式:[g++目录]g++.exe %s.cpp -o %s.exe [编译选项]例如以下命令使用刚安装的mingw4.8.1 g++编译, ...

  5. EasyDarwin开源流媒体服务器支持basic基本认证和digest摘要自定义认证

    本文转自EasyDarwin开源团队成员的博客:http://blog.csdn.net/ss00_2012/article/details/52330838 在前面<EasyDarwin拉流支 ...

  6. int 转十六进制

    //使用1字节就可以表示bpublic static String numToHex8(int b) {        return String.format("%02x", b ...

  7. PAT 天梯赛 L2-013. 红色警报 【BFS】

    题目链接 https://www.patest.cn/contests/gplt/L2-013 思路 可以通过图的连通块个数来判断 假如 一座城市的失去 改变了其他城市之间的连通性 那么 这座城市本来 ...

  8. POJ 2485 Highways(最小生成树+ 输出该最小生成树里的最长的边权)

                                                                                                         ...

  9. APP测试走过的那些坑

    我现在的工作有一大部分也是app测试,虽然自己是app开发出身,但是在测试上还是跌入了很多大坑,毕竟二者还是有很大不同,所处的角度也是不一样的.而开发转测试中,我认为较难的也是一个角度的转换,以一个开 ...

  10. 狂配Nginx

    一 .Nginx虚拟主机配置(  基于不同的域名,跳转到不同的项目) 1.基于域名的虚拟主机,通过域名来区分虚拟主机——应用:外部网站 2.基于端口的虚拟主机,通过端口来区分虚拟主机——应用:公司内部 ...