VueJS多级导航组件如何在for循环中获取children嵌套name属性

核心问题说明 #

你当前的代码存在两处错误导致无法正常展示第三级children的name属性：

• 模板中第三级v-for的数据源引用错误，误写为不存在的items.children，正确数据源为二级导航对象subItem下的children属性
• 接口数据处理逻辑错误，遍历二级导航时把索引参数错当成了子导航项，导致children数组赋值不符合预期

修复步骤 #

1. 模板部分修正 #

将第三级循环的代码替换为如下内容，增加非空判断避免空数组报错，同时修正数据源引用：

<!-- 仅在存在子导航时渲染 -->
<div v-if="subItem.children && subItem.children.length">
  <div
    v-for="(subItemChild, childIndex) in subItem.children"
    :key="subItemChild.id || childIndex">
    <span class="navigation__submenu-name">{{subItemChild.name}}</span>
  </div>
</div>

2. JS数据处理逻辑修正 #

修改onLoadMainNavigation方法中二级导航的遍历逻辑，正确赋值children数组：

if (item.subMainNavigation) {
  item.subMainNavigation.forEach((subItem) => {
    subItems.push({
      name: subItem.name,
      class: subItem.class,
      // 直接关联接口返回的children数组，和你提供的示例数据结构对齐
      children: subItem.children || []
    });
  });
}

修改完成后即可正常输出第三级children的name属性。

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