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 ...
随机推荐
- c结构体里的数组与指针
/* 訪问成员数组名事实上得到的是数组的相对地址.而訪问成员指针事实上是相对地址里的内容 */ struct buf_str { int length; char buf[0]; }; struct ...
- 关于mongodb副本集读写分离 及 日志切换
mongodb的读写分离使用Replica Sets来实现 对于replica set 中的secondary 节点默认是不可读的.在写多读少的应用中,使用Replica Sets来实现读写分离.通过 ...
- EasyDarwin实现RTSP播放动态认证的两种方式:Basic/Digest & Token
问题描述 目前为了能够方便开发者,我们将EasyDarwin中的RTSP认证过程直接忽略过了,如果要开启认证的方式,我们可以在代码中打开: case kRoutingRequest: { // Inv ...
- Vue入门(一) 环境配置
Node.js 安装,https://nodejs.org/en/ 默认安装就可以 安装好后测试版本,cmd 键入命令 1.node -v 2.npm -v 安装,淘宝 NPM n ...
- 简单老式Java对象 横切关注点 最小侵入性编程 声明式编程 避免强迫类继承和接口实现
Spring In Action data injection aspect-oriented programming Plain Old Java Object 依赖注入能让相互协作的软件组件保持松 ...
- 浏览器访问配置完成的ftp服务器
在浏览器的地址栏输入: ftp://testuser:testuser@192.168.10.4 testuser 是ftp的用户名和密码: 192.168.10.4 是ftp服务器的IP地址. 亲测 ...
- Codeforces 126D Fibonacci Sums 求n由随意的Sum(fib)的方法数 dp
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/qq574857122/article/details/34120269 题目链接:点击打开链接 题意 ...
- ABAP OLE常用方法和属性
转自 http://www.cnblogs.com/eric0701/p/5213694.htmlSAP EXCEL OLE常用方法和属性 附加网上找到的比较好的源代码示例一份 1.ole中如何保存和 ...
- Could not get unknown property 'packageForR' for task ':app:processDebugReso
butterknife 注解框架的问题 删除项目中的有关butterknife 的 apply plgin.classpath 字段 把注解框架改为最新版本 implementation 'com.j ...
- shapes
接口 shape package shape; public abstract interface shape { public abstract void Draw(); public abstra ...