How to handle Bootstrap modal hide event in Vue.js?

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.