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

最新推荐文章于 2023-07-20 16:44:02 发布

原创最新推荐文章于 2023-07-20 16:44:02 发布 · 2.1w 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍了在Vue3项目中遇到的v-if和v-else分支key冲突的问题，分析了原因并提供了具体的解决方案。通过为每个分支设置不同的key，如使用menu.menuId和menu.menuId+1，可以避免key重复错误，确保模板渲染的正确性。

问题描述

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>