programing

모달이 vue에서 닫혔을 때 어떻게 진술을 실행할 수 있는가?

prostudy 2022. 4. 28. 20:33
반응형

모달이 vue에서 닫혔을 때 어떻게 진술을 실행할 수 있는가?

다음과 같은 내 vue 구성 요소:

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

나는 그렇게 노력한다.그래서 나는 사용하려고 노력한다.ref="modal"그리고 장착한다.하지만 그것은 효과가 없다.modal이 닫히면 console.log가 표시되지 않음

어떻게 하면 이 문제를 해결할 수 있을까?

모달 구성 요소에 이벤트 수신기 추가:

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

모든 이벤트는 Component Reference 섹션 아래에 나열되어 있다.

참조URL: https://stackoverflow.com/questions/52270865/how-can-i-run-a-statement-when-modal-close-on-vue

반응형