Problem with v-for, how to link two v-for loops?

Question

Vue.js

The essence of the problem - on the site, two lists are rendered through v-for. The first one renders the content, in fact 9 buttons, when clicked, the corresponding modal windows from the second list should open. That is, list 1 is buttons, list 2 is modal windows (hidden). When you click on button 3, for example, a modal window 3 should be displayed (for example, left 2 objects per date).

<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

you had errors in some places, try now

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