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

key值一定不能重复

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

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

found in

---> at packages/tabs/src/tab-nav.vue
at packages/tabs/src/tabs.vue
at src/view/practice.vue
at src/App.vue

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

查看了一下页面代码：

  {{item}}

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