Question

如何在vue js中仅显示某个v-for项目？我正在使用v-for拉YouTube数据API项。在这些项目中，有一个iframe，当用户单击播放按钮时，我想对其进行“激活”。现在，当点击按钮时，页面上的所有iframe都会显示，但我只希望点击特定的视频。

<v-card v-for="video in videos" :key="video.snippet.resourceId.videoId">
  <iframe
    v-if="videoPlaying"
    :src="ytEmbedUrl + video.snippet.resourceId.videoId"
    frameborder="0"
    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in- 
picture" allowfullscreen>
</iframe>

<v-btn round @click="videoPlaying = true">
        <v-icon dark>play_arrow</v-icon>
        <span slot="loader" class="custom-loader">
          <v-icon light>cached</v-icon>
        </span>
      </v-btn>
</v-card>

data (){
return {
videoPlaying: null
}
}

任何帮助深表感谢！：）

Answer 1

如果仅需要一个视频，则应在单击时将所选视频分配给一个属性，例如：

data: {
  videos: [...],
  selected: null
}

<iframe
  v-if="selected"
  :src="ytEmbedUrl + selected.snippet.resourceId.videoId"
  frameborder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
  allowfullscreen>
</iframe>

<v-card v-for="video in videos" :key="video.snippet.resourceId.videoId">
  <v-btn round @click="selected = video">
    <v-icon dark>play_arrow</v-icon>
    <span slot="loader" class="custom-loader">
      <v-icon light>cached</v-icon>
    </span>
  </v-btn>
</v-card>

，仅显示选定的视频。

但是，如果您的病情更为严重或想要选择多个视频，则应使用带有过滤功能的计算属性：

data: {
  all_videos: [...]
},
computed: {
  videos() {
    return this.all_videos.filter((video) => your_condition);
  }
}

Here您可以阅读更多内容。

如何在vue js中仅显示某个v-for项目？

1 个答案: