关键词：

报错截图：

---

报错原因：

通过上图的报错信息我们不难看出，报错的主要原因出现在 key 值上，报错的意思大概是检测到重复的 key 值，通俗来讲就是你的 key 值不是唯一的。

---

解决方案：

问题的根源找到了，解决起来就会很简明扼要了，其实项目中出现这种报错多为以下这两种情况：

第一种情况：

for 循环的 key 值不为唯一性。

<template>
  <div>
    <div v-for="(item,index) in listData" :key="item.idx">item.name</div>
  </div>
</template>

<script>
export default 
  data() 
    return 
      listData: [
         idx: "0", name: "数据1" ,
         idx: "0", name: "数据2" ,
         idx: "1", name: "数据3" ,
      ],
    ;
  ,
;
</script>

---

第二种情况：

页面上有两个 for 循环同一个数组，导致 key 重复。

<template>
  <div>
    <div v-for="(item,index) in listData" :key="item.idx">item.name</div>
    <div v-for="(item,index) in listData" :key="item.idx">item.name</div>
  </div>
</template>

<script>
export default 
  data() 
    return 
      listData: [
         idx: "0", name: "数据1" ,
         idx: "1", name: "数据2" ,
         idx: "2", name: "数据3" ,
      ],
    ;
  ,
;
</script>

---

以上即为两种常见的引起报错的情况，下面教你如何解决这个问题。

<template>
  <div>
    <div v-for="(item,index) in listData" :key="index">item.name</div>
  </div>
</template>

<script>  
export default 
  data() 
    return 
      listData: [
         idx: "0", name: "数据1" ,
         idx: "0", name: "数据2" ,
         idx: "1", name: "数据3" ,
      ],
    ;
  ,
;
</script>

第一种情况我们可以直接将 key 值指定为 for 循环的 index 值，这样即可解决 key 重复的问题。

---

<template>
  <div>
    <div v-for="(item,index) in listData" :key="item.idx + 1">item.name</div>
    <div v-for="(item,index) in listData" :key="item.idx">item.name</div>
  </div>
</template>

<script>
export default 
  data() 
    return 
      listData: [
         idx: "0", name: "数据1" ,
         idx: "1", name: "数据2" ,
         idx: "2", name: "数据3" ,
      ],
    ;
  ,
;
</script>

第二种情况可以看到我们将第一个 for 循环中的 key 值拼接了一个数字，这样两个 for 循环中的 key 值都具有唯一性，故不会报错。其实不只是数字，字符串或者其它的标记都可以区别 key 值得唯一性，感兴趣的同学可以下去试一试。

解决vue中报错duplicatekeysdetected:‘1‘.thismaycauseanupdateerror.(代码片段)

...到重复的key值，通俗来讲就是你的key值不是唯一的。解决方案：问题的根源找到了，解决起来就会很简明扼要了，其实项目中出现这种报错多为以下这两种情况：第一种情况ÿ 查看详情

解决vue中报错typeerror:cannotreadpropertiesofundefined(reading‘value‘)“(代码片段)

...f0c;就已经去用数组里面的变量了，故导致报错。报错解决：先判断这个数组是否为空数组之后，然后再进行赋值即可解决该报错。默认写法：<span>scope.row[index].value</span>修改之后：<span>scope.row[inde... 查看详情

npm安装过程中报错解决

安装：npm install -g truffle下述错误解决方式:npmconfigsetstrict-sslfalse 查看详情

解决vue中报错duplicatekeysdetected:‘1‘.thismaycauseanupdateerror.(代码片段)

...到重复的key值，通俗来讲就是你的key值不是唯一的。解决方案：问题的根源找到了，解决起来就会很简明扼要了，其实项目中出现这种报错多为以下这两种情况：第一种情况：for循环的key值不为唯一性。<... 查看详情

如何解决lodrunner中报错关于error-10489

如何解决LodRunner中报错关于Error-10489:Exceptionwasraisedwhencallingper-thread-terminatefunction"： 关键词：原创 如何 解决 lodrunner 中 报错关于 error 10489exception raised wh 查看详情

在vue+element开发中报:thetemplaterootrequiresexactlyoneelemen错的解决和原因

...项目开发,然后在进行添加下一个组件时报错  二.解决及原因：　　原来template中只允许模板里存在一个根节点，在template中添加一个<div>标签，之后所有的组件全部加在<div>即可解决。注意:<template></template&g... 查看详情

vue中报错propswithtypeobject/arraymustuseafactoryfunctiontoreturnthedefaultvalue(代码片段)

Invaliddefaultvalueforprop"value":PropswithtypeObject/Arraymustuseafactoryfunctiontoreturnthedefaultvalue.（propsdefault数组／对象的默认值应当由一个工厂函数返回）正确书写方式<script>exportdefaultprops:list:type:[Object,Array],default:()=>,arr:type:Array... 查看详情

unittest中报错：attributeerror:'testlogin'objecthasnoattribute'driver'解决方法

源代码如下：更改后：执行成功。 查看详情

pip升级到18.0版本过程中报错解决方法

我这台电脑是windows10系统，一般在cmd命令行界面下执行pip的升级命令：pipinstall–upgradepip 安装的时候，会有拒绝访问报错：这个时候应该是权限的问题，于是在win10系统的搜索框输入cmd，然后在命令提示符上点右键，选择以... 查看详情

vueelementui中报错：this.$messageisnotafunction(代码片段)

原因：在单独按需引入element组件时，message组件需要挂载到Vue全局对象上，而不是用Vue.use(Message)，这是message组件与其他组件不同的地方。其中与之相同、需要挂载到Vue全局对象上的，还有confirm组件。Vue组件中：1methods:2open2()3this... 查看详情

安装sqlserver2017过程中报错，日志也不知道怎么看，请问各路大神怎么解决？求解，谢谢。

提示无效的命令行参数参考技术A安装包有问题，很明显的错误 查看详情

python中报错"json.decoder.jsondecodeerror:expectingvalue:"的解决(代码片段)

在学习python语言中用json库解析网络数据时，我遇到了两个编译错误：json.decoder.JSONDecodeError:Expectingpropertynameenclosedindoublequotes:和json.decoder.JSONDecodeError:Expectingvalue:。费了一些时间才找到原因，在此记录总结，希望能对学习python的... 查看详情

java中报错出现需要“.class”怎么解决？

...术A程序中调用了某一个样式表文件（.class后缀的文件）解决方法：看看在程序里是什么地方调用过样式表文件，再看看文件路径上有没有此样式表文件 参考技术B在程序解决方案中调用了样式表文件（.Class后缀文件）：检查在程... 查看详情

kalilinux虚拟机中报错：fsckd-cancel-msg:pressctrl+ctocancelallfilesystemchecksinprogress的解决方法(代码片段)

解决KaliLinux虚拟机中fsckd-cancel-msg:PressCtrl+Ctocancelallfilesystemchecksinprogress的报错问题  首先，博主简要介绍一下，导致该报错的原因：  博主打开虚拟机的bios设置，移动过Boot的顺序而导致！！（... 查看详情

kalilinux虚拟机中报错：fsckd-cancel-msg:pressctrl+ctocancelallfilesystemchecksinprogress的解决方法(代码片段)

解决KaliLinux虚拟机中fsckd-cancel-msg:PressCtrl+Ctocancelallfilesystemchecksinprogress的报错问题  首先，博主简要介绍一下，导致该报错的原因：  博主打开虚拟机的bios设置，移动过Boot的顺序而导致！！（... 查看详情

经xcode8.0修改后的.xib文件在xcode7.3环境中报错的解决方案

经xcode8.0修改后的.xib文件在xcode7.3环境中报错的解决方案 今天遇到一个xcode7.3升级xcode8.0后的问题，原本用xcode7.3创建的.xib文件在xcode8.0中打开后会有如下的选择设备的提示，选择后，将工程在xcode7.3环境中打开刚被修改过的.x... 查看详情

kalilinux虚拟机中报错：fsckd-cancel-msg:pressctrl+ctocancelallfilesystemchecksinprogress的解决方法(代(代码片段)

解决KaliLinux虚拟机中fsckd-cancel-msg:PressCtrl+Ctocancelallfilesystemchecksinprogress的报错问题  首先，博主简要介绍一下，导致该报错的原因：  博主打开虚拟机的bios设置，移动过Boot的顺序而导致！！（... 查看详情

httpclient在androidstudio中报错

...报错“Error:(10,23)错误:程序包org.apache.http不存在”等问题解决方法：（很简单）在build.gradle中添加 useLibrary'org.apache.http.legacy' 查看详情