v-if/else branches must use unique keys.vue(29)

问题描述

vue3 + vite 使用 v-if 遍历菜单时，报错如下

v-if/else branches must use unique keys.vue(29)

---

原因分析：

vue3 中 if 与 else 的 key 不能相同

---

解决方案：

  <template v-for="(menu, index) in menuList" :key="menu.menuId">
    <a-sub-menu v-if="menu.children && menu.children.length" :key="menu.menuId">
      <template #title>{{ menu.name }}</template>
      <ReSubMenu :menuList="menu.children" />
    </a-sub-menu>
    <a-menu-item v-else :key="menu.menuId + 1">
      <span>{{ menu.name }}</span>
    </a-menu-item>
  </template>