Открытие нужного модального окна

Question

Отрисовываю несколько дивов через v-for, в каждом из дивов должна быть кнопка, которая переключает флаг показа модального окна(на компонент vue вешается v-if="this.dialFlag" @click="this.dialFlag = !this.dialFlag"), в котором содержатся некоторые данные (разные для каждого дива). Если нажать на кнопку то открываются все окна из всех дивов: одно над другим. Как добиться, чтобы открывалось лишь то модальное окно, на которое я кликнул? Уникальный флаг для каждой кнопки? Но в исходном массиве может быть много элементов для перебора, нельзя же создавать им флаги, пусть даже и динамически

Answer 1

Сделайте dialFlag объектом:

dialFlag: {}

В дивах используйте индекс дива:

<div v-for="(item,index) in items">
   <modal-win v-if="dialFlag[index]">...</modal-win>
   <button v-on:click="dialFlag[index] = !dialFlag[index]">...</button>
</div>

БЛОГ НА HUSL

Открытие нужного модального окна

Ответы (1 шт):