На одной странице есть больше 10 кнопок открывающие модальное окно, как бы сделать одним контейнером для всех?
Использую плагин vue-js-modal, вот код ниже, что бы его 10раз не повторять. Меняются картинки в слайдере, Заголовок, описание, и доп.информ. в аккордеоне.
<modal name="modal-1" width="720" height="auto" :scrollable="true">
<swiper :options="swiperOption" ref="mySwiper">
<!-- slides -->
<swiper-slide><img :src="slider1.img1" alt=""></swiper-slide>
<swiper-slide><img :src="slider1.img1" alt=""></swiper-slide>
<swiper-slide><img :src="slider1.img1" alt=""></swiper-slide>
<!-- Optional controls -->
<div class="swiper-button-prev" slot="button-prev"><i class="fa fa-angle-left" aria-hidden="true"></i>
</div>
<div class="swiper-button-next" slot="button-next"><i class="fa fa-angle-right" aria-hidden="true"></i>
</div>
</swiper>
<div class="modal-animal-content">
<h3 class="title-modal">Заголовок)</h3>
<div class="desc-modal">
<p>описание</p>
</div>
<badger-accordion :options="{openMultiplePanels: true}">
<badger-accordion-item>
<template slot="header">First Accordion Header</template>
<template slot="content">First Accordion Content</template>
</badger-accordion-item>
<badger-accordion-item>
<template slot="header">Second Accordion Header</template>
<template slot="content">Second Accordion Content</template>
</badger-accordion-item>
<badger-accordion-item>
<template slot="header">Третий Accordion Header</template>
<template slot="content">Четвертыйы Accordion Content</template>
</badger-accordion-item>
<badger-accordion-item>
<template slot="header">Четвертый Accordion Header</template>
<template slot="content">Четвертый Accordion Content</template>
</badger-accordion-item>
</badger-accordion>
<a class="read-in-ource" href="#">Читать в источнике</a>
</div>
<button class="close-modal" @click="$modal.hide('modal-1')">X</button>
</modal>
и этой кнопкой вызываю окно
<button @click="$modal.show('modal-1')">опен</button>
Примерно представляю что нужно< но не могу понять как это сделать
