Передать id в v-if с помощью цикла v-for во vue.js?

Question

[Nickita]

Добрый день!

<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'},
				]
					
			}
        }

Подскажите, пожалуйста, как можно передать id в v-if = "galleryWindow{id}", чтобы ставилось динамически. И как возможно присвоить к (galleryWindow1, galleryWindow2, galleryWindow3 и т.д.) false?

Answer 1

[0xD34F]

Делаете свойство active, которое будет ссылкой на выбранное изображение, начальное значение null. Выносите модальное окно за пределы v-for - достаточно и одного, знаете ли. В разметке окна меняете все i. на active.. Условие рендеринга окна станет v-if="active". Обработчик клика кнопки закрытия окна: @click="active = null". Обработчик клика на изображение внутри v-for: @click="active = i".

Comments

[Nickita]

Спасибо большое!