Pass id to v-if using v-for loop in vue.js?

Question

Vue.js

Good afternoon!

<div class="columns is-multiline">
   <div class="column is-4" v-for="i in images" :key="i.id">
  <figure class="image gallery" @click="galleryWindow1 = !galleryWindow1">
     <img class="wow" :class="i.animclass" :src="i.image" :alt="i.alt"/>
    <h3><span>{{ i.name }}</span></h3>
  </figure>
  <div v-if = "galleryWindow1" class="modal" :class="{'is-active' : galleryWindow1 }">
     <div class="modal-background"></div>
     <section class="modal-content">
    <figure class="image">
       <img :src="i.thumbnail"/>
    </figure>
                  
  </section>
  <button class="modal-close is-large" aria-label="close" @click = "galleryWindow1 = !galleryWindow1;"></button>
   </div>
</div>

const app = new Vue(
  {
    el: '#app',
    data:
      {
        galleryWindow: false,
        
        images: [
          {name: '18 век', alt: 'Гусар', id: 1, animclass: 'fadeInLeft', image: 'img/gallery/thubnails/gusar.jpg', thumbnail: 'img/gallery/thubnails/gusar.jpg'},
        ]
          
      }
        }

Tell me, please, how can I pass id to v-if = "galleryWindow{id}" so that it is set dynamically. And how is it possible to assign to (galleryWindow1, galleryWindow2, galleryWindow3, etc.) false?

Answer 1

Make the property active, which will be a link to the selected image, initial value null. Move the modal window outside the v-for - one is enough, you know. In the window layout, change everything i.to active.. The window rendering condition becomes v-if="active". Window close button click handler: @click="active = null". Image click handler inside v-for: @click="active = i".