key值一定不能重复

最近在vue项目中遇到一个报错，虽然不影响使用，但是报错还是得解决的

vue.esm.js?915d:628 [Vue warn]: Duplicate keys detected: 'tab-定时任务补偿'. This may cause an update error.

found in

---> <TabNav> at packages/tabs/src/tab-nav.vue
<ElTabs> at packages/tabs/src/tabs.vue
<Practice> at src/view/practice.vue
<App> at src/App.vue
<Root>

一进入某页面，就会冒出这么一长串的报错，这个是由于v-for循环里，key值可能重复了，所以会报这个错。查看了一下页面代码：

查看了一下页面代码：

<el-tabs v-model="activeName" type="card" @tab-click="handleClick" editable  @tab-remove="removeTab">
  <el-tab-pane :label="item" :name="item" v-for="(item, index) in editableTabs" :key="index">{{item}}</el-tab-pane>
</el-tabs>
removeTab(targetName) {
  console.log(targetName)
  this.editableTabs.forEach((item, index)=>{
    if(targetName === item){
        this.editableTabs.splice(index, 1)
    }
  })
}

key值是必须唯一的，如果重复就会报错 当removeTab事件时 index会发生变化；

不过直接用index作为key并不是一个好的选择，这样做不利于性能的提升，可以使用item的唯一id作为key更好！ 就不会发生这种事情了；