[Vuejs]-How can I display only a certain v-for item in vue js?

by

0👍

✅

If you need only one video, then on click you should assign the chosen video to one property, something like:

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>

and just show only selected video.

But if your condition is more advanced or you want to choose several videos, you should use computed property with filtering:

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

Here you can read more.

Leave a comment