web-dev-qa-db-ja.com

Bootstrap JSでVueモーダル非表示イベントを処理します

Vue（2）にBootstrap（3）モーダル非表示イベントを処理する適切な方法はありますか？

私はこれをJQueryの方法として見つけましたが、Vueでこのイベントをキャプチャする方法がわかりません：

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

v-on:hide.bs.modal="alert('hide')のようなものを追加しても機能しないようです。

twitter-bootstrap-3vue.jsbootstrap-modalvuejs2
8
Arno van Oordt

BootstrapはJQueryを使用してカスタムイベントhidden.bs.modalをトリガーするため、Vue（これは内部イベントを内部で使用していると思われます）によって簡単にキャッチされません。

Bootstrapのネイティブモーダルを使用するには、ページにJQueryが必要なので、JQueryを使用してキャッチします。 ref="vuemodal"をBootstrapモーダルに追加すると仮定すると、このようなことができます。

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

実施例 。

25
Bert

https://bootstrap-vue.js.org/docs/components/modal#overview を参照してください。そこで、イベント "hide"または "hidden"を見つけることができます。このイベントをバインドできます。

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

1つのオプションは、変数に関連付けることです。

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>
3
retrograde