Answer the question
In order to leave comments, you need to log in
How to use Bootstrap modal window dynamically with Vue?
Please tell me, I just started my acquaintance with Vue, how to dynamically use Bootstrap modal windows using Vue?
I use Laravel, I add the following components in the template:
<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>
<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>
Answer the question
In order to leave comments, you need to log in
Maybe use a ready-made wrapper for Bootstrap in Vue?
https://bootstrap-vue.org/docs/components/modal
It is planned to have up to 30 such elements on the page, so it is impossible to make such a number of windows, so as not to increase the size of the DOM
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question