My vue ponent like this :

<template>
    ...
    <b-modal ref="modal" id="modalInvoice" size="lg"  title="Invoice">
        <Invoice/>
        <div slot="modal-footer" class="w-100"> 
            <b-btn size="sm" class="float-right" variant="warning" @click="show=false">
                <i class="fa fa-print"></i> Print
            </b-btn>
        </div>
    </b-modal>

    ...
        <b-btn variant="warning" class="btn-square mt-2" v-b-modal.modalInvoice @click="checkout()"><i class="fa fa-credit-card-alt"></i>Checkout</b-btn>
    ...
</template>
<script>
    ...
    export default {
        ...
        mounted() {
            $(this.$refs.modal).on('hidden.bs.modal', () => {
                console.log('close modal')
            })
        },
    }
</script>

I try like that. So I try using ref="modal" and mounted. But it does not works. If modal close, the console.log is not show

How can I solve this problem?

My vue ponent like this :

<template>
    ...
    <b-modal ref="modal" id="modalInvoice" size="lg"  title="Invoice">
        <Invoice/>
        <div slot="modal-footer" class="w-100"> 
            <b-btn size="sm" class="float-right" variant="warning" @click="show=false">
                <i class="fa fa-print"></i> Print
            </b-btn>
        </div>
    </b-modal>

    ...
        <b-btn variant="warning" class="btn-square mt-2" v-b-modal.modalInvoice @click="checkout()"><i class="fa fa-credit-card-alt"></i>Checkout</b-btn>
    ...
</template>
<script>
    ...
    export default {
        ...
        mounted() {
            $(this.$refs.modal).on('hidden.bs.modal', () => {
                console.log('close modal')
            })
        },
    }
</script>

I try like that. So I try using ref="modal" and mounted. But it does not works. If modal close, the console.log is not show

How can I solve this problem?

• javascript
• vue.js
• vuejs2
• bootstrap-modal
• vue-ponent

Share Improve this question Follow asked Sep 11, 2018 at 7:32 moses tohmoses toh 13.2k8181 gold badges265265 silver badges459459 bronze badges 2

• Instead of @click="show=false" add a function that changes show property and does what you need? – dziraf Commented Sep 11, 2018 at 7:36
• Could you provide us some more information? 1. B-modal is your ponent or is it from some framework or library? 2. Are you sure that the event is emitted properly so the error is only in catching the event? 3. Are you sure that it is the b-modal ponent that emits the event (not the button or the invoice)? – Máté Wiszt Commented Sep 11, 2018 at 7:41

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Add an event listener on the modal ponent:

<b-modal ref="modal" id="modalInvoice" size="lg"  title="Invoice" @hidden="onHidden">
    <Invoice/>
    <div slot="modal-footer" class="w-100"> 
        <b-btn size="sm" class="float-right" variant="warning" @click="show=false">
            <i class="fa fa-print"></i> Print
        </b-btn>
    </div>
</b-modal>

methods: {
  onHidden (e) {
    console.log('the modal was hidden')
  }
}

All the events are listed under the Component Reference section.