<el-menu>组件v-if判断出现key报错？

Question

<el-menu> v-if 会出现报错信息

如下代码：(报错信息：Duplicate keys found during update: 0 Make sure keys are unique. )

<el-menu mode="horizontal" :default-active="$route.path" router>
    <template v-for="(item,key) in props.asideSubsMenu" :key="key">
        <el-menu-item :index="item.path" v-if="item.children.length === 0" />
    </template>
</el-menu>

经测试，修改为 mode="vertical" 之后，报错信息消失。
这个问题，一直都没弄明白。还望大神们不吝赐教！

Answer 1

v-if 的逻辑可前置，只使用 v-for 即可。找到报错的具体原因，到底是哪个 key 影响到的。

// 伪代码
v-for="(item,key) in props.asideSubsMenu.filter(item => item?.children.length === 0)"

Answer 2

 <el-menu ellipsis class="flex-1 overflow-hidden" mode="horizontal" router>
        <template v-for="i in menu" :key="i.route">
          <el-menu-item v-if="i.children.length == 0" :index="i.route" :key="i.route + 'menu'">{{ i.name }}</el-menu-item>
          <el-sub-menu v-else-if="i.children.length > 0" :index="i.route" :key="i.route + 'sub'">
            <template #title>{{ i.name }}</template>
            <el-menu-item v-for="j in i.children" :index="j.route" :key="j.route">{{ j.name }}</el-menu-item>
          </el-sub-menu>
        </template>
      </el-menu>

每个都加个唯一key也可解决