1. Problem description:
When the vue project uses the el-tabs component of elementUI, two tabs are switched through v-if. When there are tabs with the same name in tabsA and tabsB, an error will be reported:
Duplicate keys detected: 'tab-xxx'. This may cause an update error.
When the number of tab-panes in the two tabs is inconsistent, but the name has the same item, the last error with the same name will always be reported.
2. Analysis:
This is the problem of component reuse and partial unloading when switching two identical components through v-if;
The local dom is not updated, and the same tab-pane is reused, so the tab reports an error;
Three, the solution:
When switching two identical components through v-if, add a key to the component so that it can be completely destroyed. That is, by adding a key value to each tab-pane.
<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>
Notice:
It is officially not recommended to use index as a key, because index is an uncertain value, it will change according to the change of the array, there are pitfalls, so it is best not to use index as key.