一、问题描述:
vue项目在使用elementUI的el-tabs组件时,通过v-if切换两个tabs,当tabsA和tabsB中有相同name的tab时会报错:
Duplicate keys detected: 'tab-xxx'. This may cause an update error.
当两个tabs中tab-pane的数量不一致,但是name有相同项时,总是会报最后一个相同name的错误,
二、分析:
这就是通过v-if切换两个相同的组件时,会出现组件复用,局部卸载的问题;
局部dom没有更新,复用了相同的tab-pane,所以tab报错;
三、解决办法:
当通过v-if切换两个相同组件时,给组件添加key,这样就可以完全销毁了。即通过给每一个tab-pane添加key值。
<el-tab-pane label="CPU" key="a_CPU" name="CPU">.......</el-tab-pane>
<el-tab-pane label="GPU" key="a_GPU" name="GPU">........</el-tab-pane>
注意:
官方不推荐使用index作为key,因为index是不确定的值,它会根据数组的更改而更改,有坑,所以最好不要用index做key。