昨天运行vue项目的时候,出现了[Vue warn]: Duplicate keys detected: '0'. This may cause an update error(错误,检测到重复的key值:”0“,这可能会导致更新错误)

错误原因:

我们在使用v-for的时候,都要必须加上一个唯一的key值,但是这里写了两个for循环,尽管都加上了key值,然而又将key的值写成一样的了。所以就导致了警告。

解决办法:

可以将其中一个的key修改一下即可。

出错的地方:

写了两个一样的for循环,绑定的key相同。

<div class="info" v-for="(item, index) in itemList" :key="index"></div>
<div class="info" v-for="(item, index) in itemList" :key="index"></div>

可以修改其中一个的key值。

<div class="info" v-for="(item, index) in itemList" :key="'info-'+ index"></div>
<div class="info1" v-for="(item, index) in itemList" :key="'info1-'+ index"></div>

vue报错之Duplicate keys detected: '0'. 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. Duplicate keys detected: '0'. This may cause an update error.

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

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

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

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

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

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

    今天遇到这个问题,遇到这个问题多数因为:key值的问题 第一种情况(key重复) <div class="name-list" v-for="(item,index ...

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

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

  7. vue报错信息

    1.Property or method "xxx" is not defined on the instance but referenced during render. 原因 ...

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

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

  9. vue安装之后的报错处理---chromedriver@2.35.0 install: `node install.js`

    报错:chromedriver@2.35.0 install: `node install.js` 这个错误的解决方法就是在你创建的项目目录,比如你创建的项目叫myVue,然后你就要在myVue这个目 ...

随机推荐

  1. python中打印金字塔和九九乘法表的几种方法

    # 打印九九乘法表for i in range(1,10): for j in range(1,i+1): # x=i*j # print(i,'*',j,'=',x,end=' ') print(' ...

  2. 转载:使用Pandas进行数据匹配

    使用Pandas进行数据匹配 本文转载自:蓝鲸的网站分析笔记 原文链接:使用Pandas进行数据匹配 目录 merge()介绍 inner模式匹配 lefg模式匹配 right模式匹配 outer模式 ...

  3. LeetCode(117) Populating Next Right Pointers in Each Node II

    题目 Follow up for problem "Populating Next Right Pointers in Each Node". What if the given ...

  4. CentOS7搭建DNS服务器

    DNS是域名系统(Domain Name System)的缩写,它的作用是将主机名解析成IP(正向解析),从IP地址查询其主机名(反向解析). DNS的工作原理(1)客户机发出查询请求当被询问到有关本 ...

  5. 中国首届CSS开发者大会讲师照片

    中国首届CSS开发者大会讲师照片 Bert Bos Winter 点头猪 灭灭 jaychsu Hax 尤雨溪 一丝 勾三股四 小倩 **

  6. loj2026 「JLOI / SHOI2016」成绩比较

    orz #include <iostream> #include <cstdio> using namespace std; typedef long long ll; int ...

  7. [转]mysql Access denied for user 'root'@'localhost' 问题的解决方法

    解决方案如下: # /etc/init.d/mysql stop # mysqld_safe --user=mysql --skip-grant-tables --skip-networking &a ...

  8. Nginx从入门到放弃-第5章 Nginx架构篇

    5-1 Nginx常见问题_架构篇介绍 5-2 Nginx常见问题_多个server中虚拟主机读取的优先级 5-3 Nginx常见问题_多个location匹配的优先级1 5-4 Nginx常见问题_ ...

  9. 30行js让你的rem弹性布局适配所有分辨率(含竖屏适配)

    用rem来实现移动端的弹性布局是个好主意!用法如下: CSS @media only screen and (max-width: 320px), only screen and (max-devic ...

  10. AtCoder Regular Contest 083

    C - Sugar Water Time limit : 3sec / Memory limit : 256MB Score : 300 points Problem Statement Snuke ...