Vue router-link param undefined in nested loop

Question

I have a loop inside another loop.

The videos.id is undefined in the <router-link> but is rendered just fine otherwise..

    <ul>
      <li v-for="category in categories" :key="category.id">
       {{category.name}}
        <div v-for="videos in category.videos" :key="videos.id">
           <router-link v-bind:to="/video-player/ + videos.id"> {{videos.id}}  {{videos.name}}</router-link>
        </div>
      </li>
    </ul>

Answer 1

Based on your codepen: https://codepen.io/cwerner/pen/mdyjLBv

It is showing videos.id as undefined because this data doesn't exist:

{
    id: 1,
    name: "Category",
    videos: [
      {
        name: "Video1"
      },
      {
        name: "Video 2",
      }
    ],
  }

There is only an id for category, so you must add id's in the video objects too:

{
    id: 1,
    name: "Category",
    videos: [
      {
        name: "Video1",
        id: 1
      },
      {
        name: "Video 2",
        id: 2
      }
    ],
  }