Get event click on backdrop using modal Bootstrap-vue

Question

Im using Vue2 and Boostrap-vue to make an modal component here's the code

I passed the following props @backdrop="handleBackdrop"

<template>
<b-modal
    v-model="showModal"
    id="modal"
    @backdrop="handleBackdrop"
    @ok="handleBackdrop"
  >
...
</template>

<script>
data() {
    return {
      showModal: false
     }
},
  methods: {
    show() {
      this.showModal = true;
    },
    hide() {
      this.showModal = false;
    },
    handleBackdrop(ev) {
      ev.preventDefault();
      console.log("Click backdrop");
    }
}
</script>

i'm using this @ok to test the function handleBackdrop and it works but i cannot active this click on backdrop

Answer 1

There's no backdrop event on the modal, that's why you aren't seeing anything happening.

What you can do instead is watch the hide event which contains a trigger property. This trigger property will contain what triggered the hide event, including backdrop if that was clicked.

https://bootstrap-vue.js.org/docs/components/modal/#prevent-closing

<template>
  <b-modal id="modal" @hide="onHide"></b-modal>
</template>

<script>

new Vue({
  el: '#app',
  methods: {
    onHide(evt) {
      if(evt.trigger === "backdrop"){
        evt.preventDefault();
        this.handleBackdrop();
      }
    },
    handleBackdrop() {
      console.log('Backdrop clicked')
    }
  }
})
</script>

If you simply want to prevent the modal closing if the backdrop is clicked you can add the no-close-on-backdrop to the modal to prevent this behavior.