Handle Bootstrap modal hide event in Vue JS

by

Bootstrap uses JQuery to trigger the custom event hidden.bs.modal so it is not easily caught by Vue (which I believe uses native events under the hood).

Since you have to have JQuery on a the page to use Bootstrap’s native modal, just use JQuery to catch it. Assuming you add a ref="vuemodal" to your Bootstrap modal you can do something like this.

new Vue({
  el:"#app",
  data:{
  },
  methods:{
    doSomethingOnHidden(){
      //do something
    }
  },
  mounted(){
    $(this.$refs.vuemodal).on("hidden.bs.modal", this.doSomethingOnHidden)
  }
})

Working example.

Leave a Comment