在Vue JS中处理Bootstrap模式隐藏事件

请参阅https://bootstrap-vue.js.org/docs/components/modal#overview 在这里您可以找到事件“隐藏”或“隐藏”，因此可以绑定此事件：

<b-modal ref="someModal" @hide="doSometing">

一种选择是将其绑定到变量：

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>

Bootstrap使用JQuery触发自定义事件，hidden.bs.modal因此它不容易被Vue捕获（我相信它会在后台使用本机事件）。

由于必须在页面上使用JQuery才能使用Bootstrap的本机模式，因此只需使用JQuery即可捕获它。假设您ref="vuemodal"在Bootstrap模式中添加，您可以执行以下操作。

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

工作示例。