Vue параметр роутера не определен во вложенном цикле

Question

У меня есть все oop внутри другого l oop.

videos.id не определено в <router-link>, но в противном случае отображается просто отлично.

    <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

На основании вашего кода: https://codepen.io/cwerner/pen/mdyjLBv

Показывает videos.id как неопределенный, поскольку эти данные не существуют:

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

Существует только идентификатор для категории, поэтому вы также должны добавлять идентификаторы в видеообъекты:

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

Answer 2

Содержимое связанного свойства должно быть правильным JS выражением. /video-player/ + videos.id недопустимо JS выражение. Измените его на v-bind:to="'/video-player/' + videos.id"