Vue中读取嵌套数组数据实现动态父菜单与子菜单渲染的方法

参考素材 #

• 业务使用的数据结构：
  
• 控制台打印的subMenu字段数据：
  
• 最终要实现的菜单设计效果：
  

核心错误点 #

• 子菜单遍历对象错误：原有代码中子菜单<nav-menu-link>的v-for仍在遍历父菜单数组newList，没有读取每个父菜单条目下的subMenu子菜单数组
• 循环变量名冲突：父子层级的循环变量都命名为item、索引都为i，作用域重叠会导致取值混乱
• 缺失无下级菜单的兼容逻辑：如果父菜单没有子菜单，直接渲染折叠组会出现空项，需要做分支判断

修正后代码 #

<v-list
  expand
  shaped
  class="vertical-nav-menu-items pr-5"
>
  <template v-for="(parentItem, parentIndex) in newList" :key="parentIndex">
    <!-- 存在子菜单时渲染折叠组 -->
    <nav-menu-group
      v-if="parentItem.subMenu && parentItem.subMenu.length"
      :title="parentItem.name"
      :icon="parentItem.icon || icons.mdiHomeOutline"
    >
      <!-- 遍历当前父菜单下的子菜单 -->
      <nav-menu-link
        v-for="(childItem, childIndex) in parentItem.subMenu"
        :key="childIndex"
        :title="childItem.name"
        :icon="childItem.icon || icons.mdiHomeOutline"
      />
    </nav-menu-group>
    <!-- 无下级菜单时直接渲染菜单链接 -->
    <nav-menu-link
      v-else
      :title="parentItem.name"
      :icon="parentItem.icon || icons.mdiHomeOutline"
    />
  </template>
</v-list>

补充说明 #

如果你的菜单数据里每个条目都单独配置了icon字段，直接去掉|| icons.mdiHomeOutline的默认值即可，直接绑定对应条目的icon属性即可。如果后续需要支持三级及以上嵌套菜单，可以封装递归组件实现。

内容的提问来源于stack exchange，提问作者indriyantongrh