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

 

一、错误原因

页面上有两个 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>