Vue.js open modal by click of a button
According to your snippet, you're using a classic Bootstrap modal. You just need to use data-toggle
and data-target
attributes in that case:
<div id="app"> <div class="container"> <button class="btn btn-info" data-toggle="modal" data-target="#exampleModal">show modal</button> <example-modal></example-modal> </div></div>
Edit
I misread the question so i edit my answer.
It's possible to open the modal with a custom method. You just need to find the element "#exampleModal" by using refs
and then open the modal with a bootstrap method (Bootstrap Programmatic API)
<div id="app"> <div class="container"> <button class="btn btn-info" @click="showModal">show modal</button> <example-modal ref="modal"></example-modal> </div></div>
methods: { showModal() { let element = this.$refs.modal.$el $(element).modal('show') }}
Without jQuery you could create a function on "method:" block like this:
openEditModal(data){ // <handle with your data> this.$root.$emit("bv::show::modal", "your-modal-id");}