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

原文地址:https://www.cnblogs.com/codebook/p/10325102.html

时间: 2024-08-30 08:20:39

vue key值的重复键问题报错的相关文章

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

在Java中,有一种key值可以重复的map,就是IdentityHashMap.在IdentityHashMap中,判断两个键值k1和 k2相等的条件是 k1 == k2 .在正常的Map 实现(如 HashMap)中,当且仅当满足下列条件时才认为两个键 k1 和 k2 相等:(k1==null ? k2==null : e1.equals(e2)). IdentityHashMap类利用哈希表实现 Map 接口,比较键(和值)时使用引用相等性代替对象相等性.该类不是 通用 Map 实现!此类

【语言】java中key值可以重复的map:IdentityHashMap

http://www.rigongyizu.com/java-identityhashmap/ 在java中, 有一种key值可以重复的map,就是IdentityHashMap.在IdentityHashMap中,判断两个键值k1和 k2相等的条件是 k1 == k2 .在正常的Map 实现(如 HashMap)中,当且仅当满足下列条件时才认为两个键 k1 和 k2 相等:(k1==null ? k2==null : e1.equals(e2)). IdentityHashMap类利用哈希表实

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

package com.test.collection; import java.util.HashMap; import java.util.Map; //Map中key值不可重复的测试 public class TestEquals { public static void main(String[] args) { String s1=new String("abc"); String s2=new String("abc"); Map map=new Has

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

vue项目npm run dev 后项目报错 : 提示 "exports is not defined". 导致这个问题是因为balbel的配置文件.babelrc的问题: { "presets": [ ["env", { "modules": false }], "stage-2" ], "plugins": ["transform-runtime"], "

解决: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 set session sql_mode='ONLY_FULL_GROUP_BY,STRICT_TRANS_TABLES,ERROR_FOR_DIVISION_BY_ZERO,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION'; 用mysql dump方式好像可以通过

Vue 项目: npm run dev b报错 “&#39;webpack-dev-server&#39; 不是内部或外部命令,也不是可运行的程序 或批处理文件。”

前提: 电脑已经安装了nodeJS和npm,  项目是直接下载的zip包. 报错步骤为1:cd /d 目录: 2. npm ren dev  -------> 报错如下: > webpack-dev-server --inline --progress --config build/webpack.dev.conf.js 'webpack-dev-server' 不是内部或外部命令,也不是可运行的程序或批处理文件.npm ERR! code ELIFECYCLEnpm ERR! errno 1

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

vue.js 中使用(...)运算符报错的解决方法 Syntax Error:Unexpected token(XX:X) }, computed:{ ...mapGetters([ 'pageSize' ]) }, 这个错误是在项目中,不识别es6的扩展运算符,解决办法(四步走)如下: 第一步:安装babel-plugin-transform-object-rest-spread cnpm install babel-plugin-transform-object-rest-spread 第二

关于当传过来的值转换成string类型报错的问题

有时候直接写 string str=request.param["str"].tostring;会报错,是因为接受到的值可能是空的 这个时候就可以这样写 string _action = string.Format("{0}", Request.QueryString["str"]); 这样写就不会报错了

解决:mysql timestamp默认值0000-00-00 00:00:00 报错

一. 问题的引出 我们在用mysql5.7创建表时,如果把timestamp(时间戳)的默认值设置为0000-00-00 00:00:00 的形式,将会产生一条报错: `RepaymentDate` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00' COMMENT '回款日期', 报错信息如下: [Err] 1067 - Invalid default value for 'RepaymentDate' 二. 找出原因 这个问题和mysql中sql