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. 深入Garbage First垃圾收集器(三)G1中的垃圾收集

    G1 GC在收集暂停的过程中会回收绝大部分堆分区,唯一的例外是多级并发标记期间的清除阶段. 在清除阶段,如果G1遇到仅仅只存放了垃圾的分区,它就会立刻收集这些分区并将它们放回空闲分区列表中,因此这些分 ...

  2. ubuntu 单网卡双 ip

    局域网一套物理网络里有两个 ip 段,单网卡设置多 ip 可实现同时访问两个网段. $ cat /etc/network/interfaces # interfaces(5) file used by ...

  3. php CURL 模拟 POST 提交数据

    <?php function liansuo_post($url,$data){ // 模拟提交数据函数 $curl = curl_init(); // 启动一个CURL会话 curl_seto ...

  4. spring 集成 mybatis 后数据源初始化失败问题分析

    问题背景: 项目使用spring,springmvc框架,后边需操作关系数据库,选择了mybatis + durid,集成mybatis后,项目一直启动失败.错误的原因是dataSource初始化的时 ...

  5. maven的基本原理和使用

    一.Maven中央存储库 当你建立一个 Maven 的项目,Maven 会检查你的 pom.xml 文件,以确定哪些依赖下载.首先,Maven 将从本地资源库获得 Maven 的本地资源库依赖资源,如 ...

  6. 给js设定一个统一的入口

    javascript是种脚本语言,浏览器下载到哪儿就会运行到哪儿,这样的特性会为编程提供方便,但也easy使程序过于凌乱.支离破碎. js从功能上能够分为两大部分--框架部分和应用部分,框架部分提供的 ...

  7. [自动化平台系列] - 初次使用 Macaca-前端自动化测试(2)

    接一下来讲一讲api的使用   http://macacajs.github.io/macaca-wd/api/ var _config = { //本程序的host host: 'http://te ...

  8. Codeforces Round #303 (Div. 2) D. Queue —— 贪心

    题目链接:http://codeforces.com/problemset/problem/545/D 题解: 问经过调整,最多能使多少个人满意. 首先是排序,然后策略是:如果这个人对等待时间满意,则 ...

  9. 一个测试基础面试题——如何测试web银行开户

    之前面试被问到过这样一个问题,自己答的都是一些UI界面上的case,看了一些大神的关于这类面试题的总结才知道自己差的不是一点半点,今天也总结下. 内管银行开户,有账号.用户名.用户证件类型.证件号三个 ...

  10. 安装Nginx四层负载均衡

    Nginx1.9开始支持tcp层的转发,通过stream实现的,而socket也是基于tcp通信. stream模块默认不安装的,需要手动添加参数:–with-stream,官方下载地址:downlo ...