Подскажите пожалуйста, с Vue я только начала своё знакомство, как правильно динамически использовать модальные окна Bootstrap с помощью Vue?
Я использую Laravel, в шаблоне добавляю следующие компоненты:
<button @click="showModal = true">Кнопка 1</button>
<modal v-if="showModal" @close="showModal = false">
<template slot="modal-header"> Заголовок 1 </template>
<template slot="modal-text"> Текст 1 </template>
<template slot="modal-footer"><button class="btn btn-primary">Save Changes</button></template>
</modal>
<button @click="showModal = true">Кнопка 2</button>
<modal v-if="showModal" @close="showModal = false">
<template slot="modal-header"> Заголовок 2 </template>
<template slot="modal-text"> Текст 2 </template>
<template slot="modal-footer"><button class="btn btn-primary">Save Changes</button></template>
</modal>
В компоненте modal.vue следующий код:
<template>
<div class="modal fade show" id="myModal" style="display: block;">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><slot name="modal-header"></slot></h4>
<button type="button" class="close" @click="$emit('close')" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" >×</span>
</button>
</div>
<div class="modal-body">
<slot name="modal-text"></slot>
</div>
<div class="modal-footer">
<slot name="modal-footer"></slot>
<button type="button" class="btn btn-danger" @click="$emit('close')" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
showModal: false,
modalText: ''
}
},
methods: {
showModalFn: function (showModalData) {
this.showModal = true
this.modalText = 'Whatever you want to show'
}
}
}
</script>
При нажатии на кнопки открывается всегда модальное окно с содержимым кнопки 2.
Планируется до 30 таких элементов на странице. Есть вариант решения на jquery, с динамическим содержимым при наличии одного окна, но всё же хочу реализовать это на Vue.
Я так поняла, что нужно передать id для каждого окна, чтобы динамически менять содержимое.
Как это можно реализовать?
Простой