Пробема с v-for, как связать два цикла v-for?

Question

[Alimsky]

Суть пробемы - на сайте два списка отрисовываются через v-for. Первый отрисовывает контент, по сути 9 кнопочек при нажатии на которые должны открываться соответствующие модальные окна из второго списка. То есть 1 список это кнопочки, 2 список это модальные окна(скрытые). При клике на кнопочку 3 например, дожно отобразиться модальное окошко 3. (для примера оставил по 2 объекта в дата).

<template>
  <h1>Portfolio</h1>
  <ul class="portfolio__video-item">
    <li
        v-for="video in mainVideo"
        :key="video.id"
        class="portfolio__video-item__subitem"
    >
      <img :src="video.img">
      <div class="portfolio__video-descr">
        <div class="portfolio__video-descr__title">
          {{ video.title }}
        </div>
        <div class="portfolio__video-descr__subtitle">
              <span>
                {{ video.subtitle }}
              </span>
        </div>
      </div>
    </li>
  </ul>

  <div
      class="modal"
      v-for="modal in modals"
      :key="modal.id"
  >
    <div class="modal__close">&times;</div>
    <div class="modal__wrapper" >
      <div class="modal__player">
        <iframe
            class="modal__player-item"
            :src="modal.url"
        ></iframe>
      </div>
      <div class="modal__descr-block">
        <h2 class="modal__descr-block__subtitle">
          <span>{{ modal.title }}</span>
        </h2>
        <div class="modal__descr-block__descr">
          <span>{{ modal.description }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mainVideo: [
        {
          id: 1,
          img: require("@/assets/images/video1.jpg"),
          title: 'SH’U RAINCOATS',
          subtitle: 'реклама бренда одежды'
        },
        {
          id: 2,
          img: require("@/assets/images/video2.jpg"),
          title: 'CHEEK TO CHEEK',
          subtitle: 'короткометражный фильм'
        }
      ],
      modals: [
        {
          id: 1,
          url: 'https://player.vimeo.com/video/156585061',
          title: 'SH’U Raincoats',
          description: "Проморолик для бренда одежды"
        },
        {
          id: 2,
          url: 'https://player.vimeo.com/video/454766192',
          title: 'Cheek To Cheek',
          description: "Экранизация пьесы Джона "
        },
      ],
    }
  }
}
</script>

Answer 1

[TheOnlyFastCoder2]

у вас ошибки были в некоторых местах , попробуйте сейчас

<template>
  <div className="container">
    <h1>Portfolio</h1>
    <ul class="portfolio__video-item">
        <li
            v-for="video in mainVideo"
            v-bind:key="video.id"
            class="portfolio__video-item__subitem"
        >
            <img v-bind:src="video.img" />
            <div class="portfolio__video-descr">
                <div class="portfolio__video-descr__title">
                    {{ video.title }}
                </div>
                <div class="portfolio__video-descr__subtitle">
                    <span>
                        {{ video.subtitle }}
                    </span>
                </div>
            </div>
        </li>
    </ul>

    <div
        class="modal"
        v-for="modal in modals"
        v-bind:key="modal.id"
    >
        <div class="modal__close">&times;</div>
        <div class="modal__wrapper" >
        <div class="modal__player">
            <iframe
                class="modal__player-item"
                v-bind:src="modal.url"
            ></iframe>
        </div>
            <div class="modal__descr-block">
                <h2 class="modal__descr-block__subtitle">
                <span>{{ modal.title }}</span>
                </h2>
                <div class="modal__descr-block__descr">
                    <span>{{ modal.description }}</span>
                </div>
            </div>
        </div>
     </div>
  </div>
  
</template>

Comments

[Alimsky]

Без v-bind тоже работает. Это укороченная запись. Дело в том чтобы по клику на video из mainVideo открывалось соответствующее модальное окно modal из modals