Mis datos provienen de una API de la siguiente manera
{ "ALBUMS":[ { "ID":"1", "TITLE":"'THE BEST OF" }, { "ID":"2", "TITLE":"MADE IN ENGLAND" }, ], "PLAYLISTS":[ { "ID":"5", "TITLE":"SUNSET SESSIONS" }, "ID":"2", "TITLE":"POOLSIDE SESSIONS" } ], }Quiero enumerar todos los títulos y tipos (álbum o lista de reproducción).
Lo siguiente que se me ocurrió solo me da el primer hijo de álbumes y listas de reproducción:
<div v-for="(item, index) in items" :key="item.id"> <h1 class="category">{{index}}</h1> <h1 class="title">{{item[0].title}}</h1>Mi resultado deseado sería:
Album The Best Of Album Made In England Playlist Sunset Sessions Playlist Sunset SessionsParece que te faltaba el segundo nivel de tu jerarquía de datos. Consulte el siguiente fragmento para ver un ejemplo de cómo podría funcionar con los datos que ha proporcionado.
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>