vue报错Duplicate keys detected: '1'. This may cause an update error.key值重复

最新推荐文章于 2025-03-25 18:02:43 发布

小瑜的csdn

最新推荐文章于 2025-03-25 18:02:43 发布

阅读量8k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 vue

本文链接：https://blog.youkuaiyun.com/XYLHxylh/article/details/87269822

前端同时被 2 个专栏收录

40 篇文章

订阅专栏

vue

7 篇文章

订阅专栏

本文探讨了Vue中key属性重复导致的问题，不仅限于常见的原因，还深入分析了两个相同for循环下key值冲突的情况，并提供了解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

除了网上大家都在说的原因key值重复之外还有一个原因就是有两个相同的for循环，而这两个for循环的key值是一样的，此时将一个的key值加一个数字或者加一个字符串例如

<template>
  <div class="nav">
    <div v-for="(item,index) in iconHref" class="icon" :key="index" >
      <img :src="item.picture" :class="navPicStyle" v-show="showpic">
      <div class="pic-text" v-show="type==='picturetext'">{{item.text}}</div>
    </div>
    <div v-for="(item, index) in iconHref" class="text-icon" v-show="showtext" :key="index+10
    ">
      <div :class="navTextStyle">{{item.text}}</div>
    </div>
  </div>
</template>