Отправка данных через функцию модальному в VueJS

#javascript #vue.js

Вопрос:

Кто-нибудь знает, как передать данные модальному?.

Я пытаюсь передать данные модальному, внутри которого есть функция v-for, которая собирает URL-адрес видео, чтобы открыть его позже.

Модальный файл отсутствует в v-for, потому что, когда есть несколько видеороликов, например, сезона, он воспроизводит одно и то же видео.

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

И это метод, который предположительно отправляет данные в модальный, когда вы его открываете:

 openWatch() {
   this.watchVisible = true;
},

closeWatch() {
  this.watchVisible = false;
},

Это маршрут для получения данных эпизодов:

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

Идея в том, что он не показывает мне один и тот же URL-адрес во всех видео, которые я хочу посмотреть.

Если кто-нибудь знает, как этого добиться, я был бы очень признателен.

1. Можете ли вы представить сайт CodePen или <script> data please? Трудно помочь без данных, которые вы перебираете.

2. Хорошо. Я уже изменил его.

3. Если у каждого элемента хранится другой URL item.video -адрес, все они будут разными, или я неправильно понимаю?

4. Вовсе нет. Так и должно быть. Он показывает мне все эпизоды с их видео, каждое из которых находится в их массиве, но когда я вызываю их, он показывает мне только первое видео эпизода 1. Когда я переключаюсь на сезон 2, в котором у меня есть только 1 видео, он показывает мне соответствующее видео. Ошибка возникает, когда имеется более одного эпизода.

5. Я думаю, что ошибка заключается в том, что модальный находится внутри v-for, если я помещу его вне него. Как бы я назвал видео эпизода, на который я нажимаю?

Ответ №1:

В div, который будет нажат внутри v-for , поместите это:

 @click="openModal(item.video, item.name)"

В открытом модальном методе мы вызываем данные, которым мы хотим позже присвоить значение.

 <app-play-episode v-if="watchVisible" :video="videoplay" :name="videoname" type="iframe" @close="closeWatch"></app-play-episode>

<app-play-episode> Поместите его за пределы v-for и в data() следующее:

 data() {
  return {
    videoplay: null,
    videoname: null,
    watchVisible: false,
  };
},

В methods следующем:

 openWatch(video, name) {
   this.videoplay = video;
   this.videoname = name;
   this.watchVisible = true;
},

предоставление им значения.

1. Люди тратят время на то, чтобы помогать другим на этой платформе, они вам ничего не должны, пожалуйста, имейте это в виду, прежде чем отвечать так, как вы это делали изначально.