今天遇到这个问题,遇到这个问题多数因为:key值的问题

第一种情况(key重复)

<div class="name-list" v-for="(item,index) in list" :key="item.sid">
{{item.name}}
</div>
list: [
{
sid:,
name:"张三",
},
{
sid:,
name:"李四",
},
]

第二种情况(页面上有两个for循环同一个数组,导致key重复)

<div class="name-list" v-for="(item,index) in list" :key="index">
{{item.name}}
</div> <div class="name-list" v-for="(item,index) in list" :key="index">
{{item.name}}
</div>

第二种解决

<div class="name-list" v-for="(item,index) in list" :key="index + ''_index">
{{item.name}}
</div> <div class="name-list" v-for="(item,index) in list" :key="'index_' + index">
{{item.name}}
</div>

1.解决这些问题找到其根源就好了。祝大家撸码之路顺畅无阻、

[Vue warn]: Duplicate keys detected: '1'. This may cause an update error的更多相关文章

  1. [Vue warn]: Duplicate keys detected: '0'. This may cause an update error.

    1.[Vue warn]: Duplicate keys detected: '0'. This may cause an update error. 第一眼看到这个错误一脸懵逼,项目使用很久了,代码 ...

  2. [Vue warn]: Duplicate keys detected: 'area'. This may cause an update error.

    运行vue程序,浏览器报错: 原因:检测到重复的密钥:'area',因为在使用v-for循环绑定的时候,key的值是唯一的,不能相同,否则会出现意想不到的bug 解决办法:v-for时绑定的key唯一

  3. vue报错之Duplicate keys detected: '0'. This may cause an update error.

    昨天运行vue项目的时候,出现了[Vue warn]: Duplicate keys detected: '0'. This may cause an update error(错误,检测到重复的ke ...

  4. Duplicate keys detected: '0'. This may cause an update error.

    在运行vue项目的时候报了:[Vue warn]: Duplicate keys detected: ‘0’. This may cause an update error(错误,检测到重复的key值 ...

  5. Vue报错 Duplicate keys detected: '1'. This may cause an update error. vue报错

    情况一.错误信息展示为关键字‘keys‘,此时应该检查for循环中的key,循环的key值不为唯一性 (很普通) 情况二.有两个相同的for循环,而这两个for循环的key值是一样的,此时将一个的ke ...

  6. [VUE ERROR] Duplicate keys detected: 'tab-user'. This may cause an update error.

    错误消息如图: 如果你看到此错误消息,则说明 v-for 指令的 key值 重复了,只需修改你的 key值 让其不会重复即可.

  7. ElementUI使用v-if控制tab标签显示遇到的Duplicate keys detected: 'xxx'问题

    今天工作遇到一个问题: 需求背景:页面中有几个tab,需要根据登录用户的权限控制tab标签的显示与隐藏 . <el-tabs @tab-click="handleClick" ...

  8. vue踩坑记录:[Vue warn]: $attrs is readonly.

    今天在用element-ui的DatePicker日期选择器的时候,发现每当点击一次这个组件,控制台就会报警告`[Vue warn]: $attrs is readonly`,但是也不影响实际操作效果 ...

  9. vue.runtime.esm.js:593 [Vue warn]: Invalid prop: custom validator check failed for prop "value".报错解决

    在uni中使用 picker组件,一直报错 vue.runtime.esm.js:593 [Vue warn]: Invalid prop: custom validator check failed ...

随机推荐

  1. 使用ueditor配置后台接口

    因为后台是java,所以针对的是jsp版本的ueditor. 工程中需要导入jsp目录lib下的jar包.如果是maven管理的工程,可以导入jar包. 上传图片的功能的话,需要后台配置正确.如果需要 ...

  2. Python学习之路基础篇--04Python基础+数据类型

    1 int 只需知道 i.bit_length() 是算其二进制的位数, 如3 就是2: 5就是 3. 2 bool 要知道 while True == while 1   :除零以外的所有数都为真 ...

  3. 导入到eclipse里的工程挺大的,然后就一直报: An internal error occurred during: "Building workspace". GC overhead limit exceeded 这个错误。

    解决方法: 原因是Eclipse默认配置内存太小需要更改Eclipse安装文件夹下的eclipse.ini文件. Eclipse.ini默认文件如下: 修改如下: -Xms1024m -Xmx2048 ...

  4. mysql的分表与分区的区别

    http://www.2cto.com/database/201503/380348.html

  5. centos7下安装nginx

    1.yum install epel-release(安装epel(Extra Packages for Enterprise Linux)) 2.yum repolist(确保epel添加到yum的 ...

  6. 虚拟机安装精简版centos7过程

    虚拟机配置工作如下所示 1.创建虚拟机  使用键盘组合键CTRL+N2.选择自定义(高级) 如图所示: 3.默认如何所示: 4.选择 稍后安装操作系统 如图所示: 5.选择对应的操作系统 如何所示 6 ...

  7. VCenter6.0.0的安装过程

    背景和实验环境介绍 操作系统环境:windows 2008R2 中文企业版 前期环境配置 配置IP信息,把DNS改成自己的IP 修改主机名和后缀 安装和配置DNS服务 Vcenter 添加dns角色 ...

  8. .Net 一开始就不应该搞 .Net Core

    .Net 一开始就不应该搞 .Net Core,  java 跨平台 是 java 选择的道路,  .Net 应该发挥 和 平台 紧密结合 的 优势 . 如 控件哥 所说,  微软 应该把  IIS  ...

  9. python通过openpyxl操作excel

    python 对Excel操作常用的主要有xlwt.xlrd.openpyxl ,前者xlwt主要适合于对后缀为xls比较进行写入,而openpyxl主要是针对于Excel 2007 以上版本进行操作 ...

  10. C# winform使用combobox遍历文件夹内所有文件

    参考:https://www.cnblogs.com/hxh88/p/5814291.html 相关函数解析: 1.指定目录包含的文件和子目录 DirectoryInfo.GetFiles():获取目 ...