How can I open a modal in VueJS using bootstrap? - laravel

Question

I am trying to open a modal in my Vue Template using boostrap. but whenever I try using jquery on it, modal is not appearing.
Here is my code:
<template>
<div id="app_religion">
<!-- Button trigger modal -->
<!-- <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Open</button> -->
<button type="button" class="btn btn-primary" #click="showModal()">
Open
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
test
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
methods: {
showModal() {
console.log("test")
$('#exampleModal').modal('show');
},
},
}
</script>
I am really new in using Vue, can anyone guide me on how to solve my problem. I am really lost on trying to figure it out.

Answer 1

This can be easily implemented through plain js
Start by assigning a unique id to your modal
<div class="modal fade" id="uniqueId" tabindex="-1" role="dialog" aria-labelledby="uniqueIdlLabel" aria-hidden="true">
import Modal from bootstrap
import { Modal } from "bootstrap";
Declare a variable that will serve as your proxy to your modal, declared as uniqueModal below, Assign the variable the DOM element retrieved by uniqueId, use the inbuilt functions provided by bootstrap to manipulate the modal. Documentation
export default {
name:"randomName",
data(){
return {uniqueModal:null}
},
methods:
{
showUniqueModal() {
this.uniqueModal = new Modal(document.getElementById("uniqueId"),{ keyboard: false });
this.uniqueModal.show();
},
closeUniqueModal() {
this.uniqueModal.hide();
},
},
}

Answer 2

Why trying to do it with jQuery when you can make it with vue ?
use v-if or v-show on your modal (check the difference between the two and take the one who fits better the result you want)
https://v2.vuejs.org/v2/guide/conditional.html
Didn't tested it, i wrote it on the fly, but something like this should work.
<template>
<div>
<button type="button" class="btn btn-primary" #click="showModal">
Open
</button>
<div class="modal" v-if="modalOpen">
<p>Hello World</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
modalOpen: false
}
},
methods: {
showModal() {
this.modalOpen = true;
}
}
}
</script>