반응형
모달이 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
반응형
'programing' 카테고리의 다른 글
OIDC(vuejs + nodejs)를 사용하여 프런트엔드와 백엔드를 모두 인증하는 방법? (0) | 2022.04.28 |
---|---|
Asyncdata와 Fetch의 차이 (0) | 2022.04.28 |
Linux에서 Java SDK를 설치한 후 찾을 수 있는 위치 (0) | 2022.04.28 |
경로가 변경될 때마다 저장하기 위해 돌연변이를 커밋하는 방법 (0) | 2022.04.28 |
전처리기 토큰을 문자열로 변환 (0) | 2022.04.28 |