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">

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="">
  <div v-if="playlist.contentDetails.itemCount && playlist.status.privacyStatus === 'public'">
      <div class="content">Content:</div>
      <div v-for="playlistItem of playlists[].items">

the application blocks and tells me that "Cannot read property ‘items’ of undefined".

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

But this {{playlists[].items}} cannot be used so what i am missing?


// @ 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
      channel, playlists

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:

Source: Ask Javascript Questions