Sometimes, we want to handle Bootstrap modal hide event in Vue.js.
In this article, we’ll look at how to handle Bootstrap modal hide event in Vue.js.
How to handle Bootstrap modal hide event in Vue.js?
To handle Bootstrap modal hide event in Vue.js, we can assign a ref to our modal element.
Then we can pass the ref into the jQuery $
function and call on
on it.
For instance, we write
<script>
//...
export default {
//...
methods: {
doSomethingOnHidden() {
//...
},
},
mounted() {
$(this.$refs.vuemodal).on("hidden.bs.modal", this.doSomethingOnHidden);
},
//...
};
</script>
to get the modal element with this.$refs.vuemodal
.
Then we pass that into $
to return a jQuery object for the element.
And then we call on
with the 'hidden.bs.modal'
event and set the event handler of that to the this.doSomethingOnHidden
method.
Conclusion
To handle Bootstrap modal hide event in Vue.js, we can assign a ref to our modal element.
Then we can pass the ref into the jQuery $
function and call on
on it.