Несколько модальных компонентов с Vue
У меня возникают проблемы с реализацией динамического модального компонента в Vue.
Общий подход, который я выполняю для отображения набора данных, полученных из db, – это сброс каждой из строк в элементе таблицы HTML путем итерации по каждой из строк результата db. Что-то вроде этого: 
- как установить таймаут в методе vueJs
- Cant't запрос данных json в laravel 5.2
- Передача событий в режиме Laravel 5.4 не работает с vuejs
- Laravel не определен
- Как передать значение vue.js в качестве параметра для маршрута в лезвии
Как вы можете видеть на скриншоте, каждая из строк имеет одну или несколько кнопок, которые динамически генерируются циклом. Чтобы привязать модальный компонент к каждой из кнопок (например, кнопки «Удалить» в этом сценарии), я делаю что-то вроде этого.
HTML:
<div id="app"> <?php foreach($result as $x): ?> <modal v-if="showModal">I am Modal $x</modal> <btn @trigger="onShowModal">Button $x</btn> <?php endforeach; ?> </div> Поэтому, если у меня есть три строки в моем результате, вышеупомянутый блок кода примет форму примерно так:
<div id="app"> <modal v-if="showModal">I am Modal 1</modal> <btn @trigger="onShowModal">Button 1</btn> <modal v-if="showModal">I am Modal 2</modal> <btn @trigger="onShowModal">Button 2</btn> <modal v-if="showModal">I am Modal 3</modal> <btn @trigger="onShowModal">Button 3</btn> </div>
И вот что я делаю в конце JavaScript:
JavaScript:
Vue.component('btn',{ template: `<button @click="$emit('trigger')"><slot></slot></button>`, }); Vue.component('modal',{ template: `<p><slot></slot></p>`, }); new Vue({ el: '#app', data: { showModal: false }, methods: { onShowModal(){ this.showModal = true; } } });
Проблема с этим подходом заключается в том, что при нажатии любой из кнопок «Удалить» я получаю «стек» модалов вместо модального, который я хотел просмотреть. И это потому, что я устанавливаю showModal в true и если вы видите заполненный блок HTML, вы увидите, что для каждого из модалов установлено значение v-if="showModal" .
Нажмите здесь, чтобы увидеть демоверсию
И поскольку я начинаю понимать отношения frontend-backend, я узнаю, что этот шаблон чаще появляется в приложении. Как исправить эту проблему (с очень удобным для начинающих) уровнем?