Nuxt2中关联数组嵌套子项的实现方法咨询

当然可以实现这个需求，只需要调整你的数据结构，把Shoes对应的字符串路径改成包含主路径和子项的对象，同时在模板里做类型判断来区分处理带子女项和普通项。

修改后的关联数组结构 #

const products = {
  Shoes: {
    path: "/shoes",
    children: {
      "Shoes 4 men": "/shoes-men",
      "Shoes 4 women": "/shoes-women",
      "Shoes 4 kids": "/shoes-kids"
    }
  },
  Jeans: "/jeans"
}

前端模板循环调整 #

<div v-for="(item, text) in products" :key="text">
  <!-- 渲染带子项的主菜单 -->
  <div v-if="typeof item === 'object'">
    <span>{{ text }}: {{ item.path }}</span>
    <!-- 循环渲染子项 -->
    <div v-for="(childPath, childText) in item.children" :key="childText" style="margin-left: 20px;">
      {{ childText }}: {{ childPath }}
    </div>
  </div>
  <!-- 渲染普通无子女项 -->
  <div v-else>
    {{ text }}: {{ item }}
  </div>
</div>

这样调整后，既保留了原来Jeans项的结构，又成功给Shoes添加了嵌套子项，渲染时会自动区分两种类型的项，正常展示主项和子项内容。

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