[SOLVED] Vue b-modal @close look like it doesn't work

Vue b-modal @close look like it doesn't work

The following is my b-modal code:

<b-modal
  centered
  id="modal-center"
  title="product regist"
  body-class="p-0 m-0"
  size="col-md-6 col-sm-6"
  ok-title="regist"
  cancel-title="cancel"
  @ok="registerProduct"
  @cancel="cancelRegister"
  @close="cancelRegister"
>
  ...
</b-modal>

cancelRegister method will initialize (e.g date or category)

When I click on cancel button in the modal, the method is fired and works normally. But when I close the modal (e.g click another part click), it doesn't work.

I found some informations at bootstrap-vue docs, but I can't find anything related to this error.

Solution

According to the documentation, we may consider to add a new function to handle all hide events.

First remove the @cancel="cancelRegister" and @close="cancelRegister" and replace it with @hide=hideRegister.

Add the following in method:

hideRegister(bvModalEvent) {
  const cancelEvents = ['cancel', 'esc', 'backdrop', 'headerclose']
  if(cancelEvents.includes(bvModalEvent.trigger)) {
   this.cancelRegister()
  }
}

Please refer to the documentation for the possible BvModalEvent.trigger values.