Seeking advice on passing data to a modal.
I'm attempting to pass data to a modal, where a function within a v-for loop gathers the video URL for later opening.
The modal is placed outside the v-for loop to prevent all videos from playing the same one, especially in cases where there are multiple videos in a season.
<div class="item_XBG3T" v-for="(item, index) in data.season[show_season]" :key="index">
<div class="image_33keh lazyloaded" @click.sync="openWatch">
<img :src="'/_assets/img/covers/episodes/' + item.backdrop" class="lazyload" :alt="item.name">
<div class="duration_Ob58r">{{ runtime(item.duration) }}</div>
<div class="play_2ONZn"><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 55 55"><circle cx="27.5" cy="27.5" r="26.75" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></circle><path fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20.97 40.81L40.64 27.5 20.97 14.19v26.62z"></path></svg></div>
</div>
<h2 class="name_hMDmw" v-if="item.episode_number >= 10"><strong>E{{ item.episode_number }}</strong> {{ item.name }}</h2>
<h2 class="name_hMDmw" v-else><strong>E0{{ item.episode_number }}</strong> {{ item.name }}</h2>
<div class="overview_1HUXl">{{ item.overview | truncate(125, '...') }}</div>
<app-play-episode v-if="watchVisible" :video="item.video" :name="item.name" type="iframe" @close="closeWatch"></app-play-episode>
</div>
Here's the method to pass data to the modal when it's opened:
openWatch() {
this.watchVisible = true;
},
closeWatch() {
this.watchVisible = false;
},
This is how the episode data is retrieved:
computed: mapState({
data: state => state.series.show,
loading: state => state.series.loading
}),
beforeDestroy() {
this.$store.commit('CLEAR_SERIES_SHOW_DATA');
},
mounted() {
this.$store.dispatch("GET_SERIES_DETAILS", this.$route.params.id);
},
The goal is to avoid displaying the same URL for all the videos that need to be viewed.
If you have any insights on how to achieve this, I would greatly appreciate it.