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

Question

在Vue(2)中有没有一个像样的方法来处理Bootstrap(3)模态隐藏事件？

我发现这是一种JQuery方式,但我无法弄清楚如何在Vue中捕获此事件:

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

添加类似的东西v-on:hide.bs.modal="alert('hide')似乎不起作用.

Answer 1

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)
  }
})

工作实例.

Answer 2

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

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