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 ...
随机推荐
- SSH实现在WIN7系统下访问虚拟机中的Linux系统
使用的是centos6.4进行练习的,安装的是vmware8虚拟机.以下是总结的一些步骤: 一.确保vmware使用NAT的连接方式,如做地址.端口映射 首先查看vmware的中网络连接的一些方式:E ...
- (Vue)vue模板语法
Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统. ...
- HDU5363:Key Set
Problem Description soda has a set S with n integers {1,2,-,n}. A set is called key set if the sum o ...
- SAM4E单片机之旅——11、UART之PDC收发
使用PDC进行数据的收发能减少CPU的开销.这次就使用PDC进行UART数据的接收与发送,同时,也利用TC也实现了PDC的接收超时. PDC是针对外设的DMA控制器.对比DMA控制器,它更为简便,与相 ...
- easyui Combotree 怎么加载数据 支持多选
1.开发环境vs2012 mvc4 c# 2.HTML前端代码 <%@ Page Language="C#" AutoEventWireup="true" ...
- Jquery 实现标签切换效果
1.效果图 2.HTML代码如下 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> & ...
- 九度OJ 1113:二叉树 (完全二叉树)
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:5079 解决:1499 题目描述: 如上所示,由正整数1,2,3--组成了一颗特殊二叉树.我们已知这个二叉树的最后一个结点是n.现在的问题是 ...
- Apache JServ Protocol
ajp_百度百科 https://baike.baidu.com/item/ajp/1187933 AJP(Apache JServ Protocol)是定向包协议.因为性能原因,使用二进制格式来传输 ...
- Go语言string,int,int64 ,float之间类型转换方法
(1)int转string ? 1 2 s := strconv.Itoa(i) 等价于s := strconv.FormatInt(int64(i), 10) (2)int64转string ? 1 ...
- Python 的枚举类型
起步 Python 中的枚举类型 Python 的原生类型中并不包含枚举类型.为了提供更好的解决方案,Python 通过 PEP 435 在 3.4 版本中添加了 enum 标准库. 枚举类型可以看作 ...