Vue 3.0 Use Var as Key

  javascript, json, object, variables, vue.js

I try my best to understand this issue:

I can make a v-for like so:

<div v-for="playlistItem of playlists.PLDk0_ZYOcqxEq5ZxXAI5FiVL79hk2oSua.items">
        {{playlistItem.snippet.title}}
      </div>

You can see that i have a Playlist ID is used as key in the playlists object – this is working fine.

When i try to do this:

 <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 blocks and tells me that "Cannot read property ‘items’ of undefined".

{{playlist.id}} gives me the searched playlist and when i do this:
{{playlists[playlist.id]}} it shows me the object on the page.

But this {{playlists[playlist.id].items}} cannot be used so what i am 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>

channel contains youtube channel data in json and for the playlists i have the playlists object like so:

{
    "PLDk0_ZYOcqxEqFirstKey" : {"kind":"","etag:"","items":[...]},
    "PLDk0_ZYOcqxEqanotherKey" : {"kind":"","etag:"","items":[...]},
}

So in fact i try to get from the playlists object the object with the ID of this for loop to loop then through its items:
playlist."variableIdFormParentLoop".items

Source: Ask Javascript Questions

LEAVE A COMMENT