Bootstrap modal shift event handling in Vue JS

Question

Is there a decent way in Vue (2) to handle Bootstrap (3) modal hidden event?

I found this as a jQuery way, but can't figure out how to write this event in Vue:

$('#myModal').on('hidden.bs.modal', function () {
  // do something…
})

Adding something like v-on:hide.bs.modal="alert('hide')doesn't work.

Answer 1

Bootstrap uses jQuery to fire a custom event hidden.bs.modal, so it's not easy to catch Vue (which, I believe, uses its own events under the hood).

JQuery , Bootstrap native modal, JQuery, . , ref="vuemodal" Bootstrap, - .

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

.

Answer 2

- :

data: function(){
  return {
       showModal: false
        //starts as false.  Set as true when modal opens. Set as false on close, which triggers the watch function.
},
watch: {
  showModal: function(){
    if(this.showModal == false){
     // do something
  },
}

HTML

<button id="show-modal" @click="showModal = true">Show Modal</button>

 //later if using a component
<modal v-if="showModal" @close="showModal = false">

 // or alternatively in the bootstrap structure
<div class="modal-footer">
     <button type="button" class="btn btn-default" data-dismiss="modal" @click="showModal = false">Close</button>
</div>