Vue中如何遍历分组对象数据并输出所有条目对应的类型与标题

你当前的代码仅遍历了最外层的分组（专辑、播放列表两个大分类），且强制取了每个分组数组的第0项item[0]，所以只能拿到每个分类的第一条数据，需要再加一层嵌套遍历，循环每个分类下的所有子项。

另外你贴的接口返回数据存在语法错误，PLAYLISTS下第二个对象缺少左大括号，修正后合法数据结构如下：

const items = {
  "ALBUMS": [
    {
      "ID": "1",
      "TITLE": "'THE BEST OF"
    },
    {
      "ID": "2",
      "TITLE": "MADE IN ENGLAND"
    }
  ],
  "PLAYLISTS": [
    {
      "ID": "5",
      "TITLE": "SUNSET SESSIONS"
    },
    {
      "ID": "2",
      "TITLE": "POOLSIDE SESSIONS"
    }
  ]
}

用两层v-for嵌套遍历即可，外层遍历分组，内层遍历每个分组下的所有条目：

<!-- 外层遍历分组：groupName是分组名，groupList是分组对应的数组 -->
<template v-for="(groupList, groupName) in items" :key="groupName">
  <!-- 内层遍历分组下的所有条目 -->
  <div v-for="item in groupList" :key="item.ID">
    <!-- 格式化分类名输出 -->
    <h1 class="category">{{ groupName === 'ALBUMS' ? 'Album' : 'Playlist' }}</h1>
    <h1 class="title">{{ item.TITLE }}</h1>
  </div>
</template>

• 接口返回的字段是大写的ID和TITLE，不要写成小写的id/title，否则会读取不到值
• 外层用<template>标签包裹不会生成额外的DOM节点，如果你需要给分组加外层容器可以替换为<div>
• 你贴的预期输出里最后两条都是Sunset Sessions属于笔误，上述代码会正确输出两个播放列表的对应标题

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