有如下代码 进行遍历循环tabs

<el-tabs type="card" editable v-model="$store.state.tabIndex">
            <el-tab-pane v-for="item in tabsData " :label="item.title" :name="item.name">
                <components :is="item.component">
                </components>
            </el-tab-pane>
        </el-tabs>

结果在运行页面报错

 warning  in ./src/views/tabs.vue?vue&type=template&id=66a99398&

Module Warning (from ./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error) <el-tab-pane v-for="item in tabsData">: component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info.

后百度搜索发现原因有多个这里的原因是在循环的时候没有绑定key 解决如下 在v-for中添加一个key 解决

        <el-tabs type="card" editable v-model="$store.state.tabIndex">
            <el-tab-pane v-for="item in tabsData " :label="item.title" :key="item.subid" :name="item.name">
                <components :is="item.component">
                </components>
            </el-tab-pane>
        </el-tabs>
Last modification:October 12, 2022
反正也没人会打赏