In my attempt to grasp this issue:
I have created a v-for loop like so:
<div v-for="playlistItem of playlists.PLDk0_ZYOcqxEq5ZxXAI5FiVL79hk2oSua.items">
{{playlistItem.snippet.title}}
</div>
As you can see, I am using the Playlist ID as the key in the playlists object and it is functioning correctly.
However, when I try the following:
<div v-for="playlist of channel.items" :key="playlist.id">
<div v-if="playlist.contentDetails.itemCount && playlist.status.privacyStatus === 'public'">
<div>{{playlist.snippet.title}}</div>
<div>{{playlist.id}}</div>
<div>
<div class="content">Content:</div>
<div v-for="playlistItem of playlists[playlist.id].items">
{{playlistItem.snippet.title}}
</div>
</div>
<hr>
</div>
</div>
The application throws an error saying "Cannot read property 'items' of undefined".
{{playlist.id}} displays the searched playlist, and when I use {{playlists[playlist.id]}}, it shows the object on the page.
But for some reason, {{playlists[playlist.id].items}} cannot be accessed. What am I missing?
Background:
<script>
// @ is an alias to /src
import channel from '@/../public/cache/channel.json'
import playlists from '@/../public/cache/playlists/'
export default {
name: 'Home',
components: {
channel, playlists
},
data(){
//console.log(channel)
console.log(playlists)
return{
channel, playlists
}
}
}
</script>
The 'channel' contains YouTube channel data in JSON format, and for 'playlists', I have objects structured like this:
{
"PLDk0_ZYOcqxEqFirstKey" : {"kind":"","etag:"","items":[...]},
"PLDk0_ZYOcqxEqanotherKey" : {"kind":"","etag:"","items":[...]},
}
Essentially, I am trying to access the object from the 'playlists' object with the same ID as the current loop iteration to then iterate through its items: playlist."variableIdFromParentLoop".items
Code Sandbox Link : Code Sandbox