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. gdb调试段错误及使用

    在编程调试中,经常出现段错误,此时可用gdb调试.具体方法为注册段错误信号处理函数,在处理函数中启动gdb.具体代码如下: void segv_handler(int no) { ]; ]; FILE ...

  2. MacBook Pro使用初体验之Mac快捷键汇总(持续更新中)

    我于近日购置了一台13寸的MacBook Pro高配,打算開始进行iOS开发的学习.Pro的配置情况例如以下: (1)OS X Yosemite ,版本号10.10.3 (2)Retina显示屏,13 ...

  3. 根据ip识别地区

    <script src="http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js"></scri ...

  4. ORACLE时间函数(SYSDATE)简析

    ORACLE时间函数(SYSDATE)简析 分类: 原文地址:ORACLE时间函数(SYSDATE)简析 作者:skylway 加法 select sysdate,add_months(sysdate ...

  5. 从 Spring Cloud 看一个微服务框架的「五脏六腑」(转)

    Spring Cloud 是一个基于 Spring Boot 实现的微服务框架,它包含了实现微服务架构所需的各种组件. 本文将从 Spring Cloud 出发,分两小节讲述微服务框架的「五脏六腑」: ...

  6. Qt笔记之使用设计器自定义窗口标题栏

    1.在窗口显示之前,设置WindowFlags为FramelessWindowHint,以产生一个没有边界的窗口 例如 Widget::Widget(QWidget *parent) : QWidge ...

  7. ThinkPHP使用方法与心得

    ThinkPHP相信PHP程序员对它并不陌生,通过自己的学习在此发表个人看法,也为以后自己查找ThinkPHP方面的知识更加方便. 一.mvc及数据库CURD操作流程: 1.新建数据库:数据库名称:1 ...

  8. JavaWeb浏览器传值乱码

    在Java服务接口调用中,可能会出现乱码,如下图所示: 这是由编码不一致而致的乱码,可转,如下: name = new String(name.getBytes("ISO-8859-1&qu ...

  9. [noi2002]荒岛野人 拓展欧几里得

    克里特岛以野人群居而著称.岛上有排列成环行的M个山洞.这些山洞顺时针编号为1,2,…,M.岛上住着N个野人,一开始依次住在山洞C1,C2,…,CN中,以后每年,第i个野人会沿顺时针向前走Pi个洞住下来 ...

  10. Android-Universal-Image-Loader使用介绍

    简介 Android上最让人头疼的莫过于从网络获取图片.显示.回收,任何一个环节有问题都可能直接OOM,这个项目或许能帮到你.Universal Image Loader for Android的目的 ...