el-tab-pane的name属性 与 异步获取数据 碰撞出来的火花

105 阅读1分钟
Duplicate keys detected: 'tab-0'. This may cause an update error.

found in

---> <TabNav> at packages/tabs/src/tab-nav.vue
       <ElTabs> at packages/tabs/src/tabs.vue
        <BidInformation> at src/components/bidDetailTab/bidResult/index.vue

今天在控制台遇到了诸如这样的报错,一开始以为又是最近遇到的关于v-for的元素key值重复的问题,结果排查半天,没找到理论上会重复的值。开始怀疑是不是渲染用的数据是异步获取的问题,可是再排查了一下发现好像也不是。

苦苦定位不到,请教了下同事,同事说这个可能跟el-tab-pane的一个属性有关。

于是看了看文档,也没太看懂,问了下gpt,告诉我是因为这个组件会有一个name的属性(与el-tabs的value对应的值,即el-tabs绑定的value或者v-model是当前激活的el-tab-pane的name)

而在没有设置name的情况下,默认选用tab-0,tab-1这样的值,这样在初始渲染已经用过这个值的情况下,当异步获取数据更新时,第二轮渲染又采用了相同的值,从而导致vue的diff算法比对失败,就会出现这样的报错。

好坑!

但是更坑的是我自己!!

事后我复制了一下报错百度了下,马上就搜出来了,而我初次搜报错没有搜出来是因为我下意识以为是key的原因,没有复制完整,像开头那段代码,我只搜了第一行,其实我只需要多复制几行,把56行的内容带上就能马上找到答案了。

吃一堑长一智,希望以后能完整阅读报错信息,利用每一个可能有线索的内容!!!