vue中报错Duplicate keys detected:'1'. This may cause an update error的解决方法

更新时间：2023年03月23日 10:53:28 作者：水星记_

我们在vue开发过程中常会遇到一些错误,这篇文章主要给大家介绍了关于vue中报错Duplicate keys detected:‘1‘. This may cause an update error的解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

报错截图：

报错原因：

通过上图的报错信息我们不难看出，报错的主要原因出现在 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中报错Duplicate keys detected:‘1‘. This may cause an update error解决的文章就介绍到这了,更多相关vue报错Duplicate keys detected内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

详解nuxt路由鉴权(express模板)
这篇文章主要介绍了详解nuxt路由鉴权(express模板)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2018-11-11
VUE3+Element-plus中el-form的使用示例代码
这篇文章主要介绍了VUE3+Element-plus中el-form的使用示例代码,本文通过图文示例代码相结合给大家介绍的非常详细,需要的朋友可以参考下
2024-07-07
vue实现数据控制视图的原理解析
这篇文章主要介绍了vue如何实现的数据控制视图的相关知识，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2020-01-01
vue通过url方式展示PDF的几种方法
小编最近接手的项目中有个需求,前端显示后端返回的PDF格式的文件,下面这篇文章主要给大家介绍了关于vue通过url方式展示PDF的几种方法,需要的朋友可以参考下
2023-01-01
vue实现zip文件下载
这篇文章主要为大家详细介绍了vue实现zip文件下载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
Vue.js 事件修饰符的使用教程
在实际开发中，不可避免的会使用到对于事件的操作，如何处理 DOM 事件流，成为我们必须要掌握的技能。这篇文章主要介绍了Vue.js 事件修饰符的使用教程,需要的朋友可以参考下
2018-11-11
深入了解Vue3 中 this的使用
在Vue3中,this的使用方式与Vue2存在较大差异,尤其是在引入组合式API后,本文详细解析了Vue3中this的使用情况、底层源码和设计理念,并提供了面试技巧,感兴趣的可以了解一下
2024-09-09
移动端底部导航固定配合vue-router实现组件切换功能
经常遇到这样的需求，移动端中的导航并不是在顶部也不是在底部，而是在最底部且是固定的，当我们点击该导航项时会切换到对应的组件。这篇文章主要介绍了移动端底部导航固定配合vue-router实现组件切换功能,需要的朋友可以参考下
2019-06-06
Vue + ts实现轮播插件的示例
这篇文章主要介绍了Vue + ts实现轮播插件的示例，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
2020-11-11
vue+scss+element-ui实现表格表头斜杠一分为三方式
这篇文章主要介绍了vue+scss+element-ui实现表格表头斜杠一分为三方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-08-08