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更好！ 就不会发生这种事情了；
