在 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') 类的东西似乎不起作用。

原文由 Arno van Oordt 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

工作示例。

原文由 Bert 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

原文由 yaroslawww 发布，翻译遵循 CC BY-SA 4.0 许可协议