[Vue warn]: Duplicate keys detected: ‘1‘. This may cause an update error.(found in ＜Root＞)

最新推荐文章于 2024-08-07 13:53:00 发布

米咪米

最新推荐文章于 2024-08-07 13:53:00 发布

阅读量722

点赞数

分类专栏： Vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_52063946/article/details/118918115

版权

Vue.js 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

一、错误原因

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

<div id="app">
        <button @click='change(index)' v-for='(item,index) in list' :key='item.id'>{{item.name}}</button>
        <div v-for='(item,index) in list' :key='item.id' :class="currentIndex==index ? 'current': ''">{{item.name}}</div>
    </div>

二、解决方法

将其中一个 key值改为 :key='item.id+" "'

<div id="app">
        <button @click='change(index)' v-for='(item,index) in list' :key='item.id+" "'>{{item.name}}</button>
        <div v-for='(item,index) in list' :key='item.id' :class="currentIndex==index ? 'current': ''">{{item.name}}</div>
    </div>