Vue JSでブートストラップモーダルhideイベントを処理する

Question

Bootstrap（3）モーダルhide-eventを処理するためにVue（2）に適切な方法がありますか？

私はjQueryの道としてこれを見つけたが、私はVueの中で、このイベントをキャプチャする方法を見つけ出すことはできません。

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

v-on:hide.bs.modal="alert('hide')のようなものを追加することで動作するようには思えません。

Answer 1

ブートストラップは、私は信じているので、それが簡単にVueのでキャッチされていないカスタムイベントhidden.bs.modalを（トリガするためにjQueryのを使用していますフードの下でネイティブイベントを使用します）。

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

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

Working example。

Answer 2

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>