Как я могу отобразить только определенный элемент v-for в vue js? - PullRequest
Новая
       7

Как я могу отобразить только определенный элемент v-for в vue js?

0 голосов
/ 30 января 2019

Как я могу отобразить только определенный элемент v-for в vue js?Я вытаскиваю элементы API данных YouTube, используя v-for.Внутри этих элементов есть iframe, который я хотел бы «активировать», когда пользователь нажимает кнопку воспроизведения.Прямо сейчас все iframes на странице отображаются при нажатии кнопки, но я бы хотел, чтобы щелкнуло только конкретное видео. 

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

Любая помощь очень ценится!:)

1 Ответ

0 голосов
/ 30 января 2019

Если вам нужно только одно видео, то при клике вы должны назначить выбранное видео одному свойству, например: 

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);
  }
}

Здесь вы можете прочитать больше.

...