我的 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"
并安装。但它不起作用。如果模态关闭,则不显示 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 下部分。
关于javascript - 在 vue 上关闭模态时如何运行语句?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52270865/