Блог

Мои данные поступают из API следующим образом

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

Я хочу перечислить все названия и типы (альбом или плейлист).

Следующее, что я придумал, дает мне только первого ребенка из альбомов и списков воспроизведения:

 <div v-for="(item, index) in items" :key="item.id">
 <h1 class="category">{{index}}</h1>
 <h1 class="title">{{item[0].title}}</h1>
 

Мой желаемый результат был бы:

 Album
The Best Of

Album
Made In England

Playlist
Sunset Sessions

Playlist 
Sunset Sessions
 

Похоже, вам не хватало второго уровня иерархии данных. Смотрите следующий фрагмент для примера того, как он может работать с предоставленными вами данными

 new Vue({
  el: "#app",
  data: {
   "ALBUMS":[
      {
         "ID":"1",
         "TITLE":"'THE BEST OF"
      },
      {
         "ID":"2",
         "TITLE":"MADE IN ENGLAND"
      },
   ],
   "PLAYLISTS":[
      {
         "ID":"5",
         "TITLE":"SUNSET SESSIONS"
      },
      {
         "ID":"2",
         "TITLE":"POOLSIDE SESSIONS"
      }
   ],
  },
}) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
   <div v-for="album in ALBUMS" :key="album.ID">
   <strong>Album</strong>
     {{album.TITLE}}
   </div>
   <div v-for="playlist in PLAYLISTS" :key="playlist.ID">
     <strong>Playlist</strong>
     {{playlist.TITLE}}
   </div>
</div>