Vue router-link 参数在嵌套循环中未定义

Question

我在另一个循环中有一个循环。

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

绑定的内容属性必须是有效的 JS 表达式。 /video-player/ + videos.id 不是有效的 JS 表达式。将其更改为 v-bind:to="'/video-player/' + videos.id"

Answer 2

基于您的代码笔：https://codepen.io/cwerner/pen/mdyjLBv

显示 videos.id 为未定义，因为此数据不存在：

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

类别只有一个id，所以你也必须在视频对象中添加id：

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

Vue router-link 参数在嵌套循环中未定义

Vue router-link param undefined in nested loop

loops

bind

vue.js

vue-router