Prevent Bootstrap-Vue Modal From Opening

Question

I am using the Bootstrap-Vue modal and want to stop it from opening at times. I'm not sure with how to block the default behavior.

   <b-img
      ref='cal-modal-button'
      id='cal-modal-button'
      class="cal-icon"
      v-bind:src="imagePath + calimage"
      v-b-modal.date-time-modal
      >
   </b-img>

And then the stripped down modal is set up as such:

<b-modal id="date-time-modal" name="header-modal" ref="date-time-modal" hide-footer title="Set Date and Time">
   ...
</b-modal>

Is there a way to prevent it from popping up without using JQuery?

Aurel Aurel · Accepted Answer · 2019-09-28T15:49:47

From the documentation you can cancel modal by using show event :

<template>
  // ...
  <b-modal @show="onShow" ... />
</template>
<script>
export default {
  // ...
  data:() => ({
    modalDisabled:true
  }),
  methods: {
    onShow(bvModalEvt) {
      if(this.modalDisabled) {
        bvModalEvt.preventDefault()
      }
    }
  }
}
</script>

show event reference : https://bootstrap-vue.js.org/docs/components/modal/#comp-ref-b-modal-events

Always emits just before modal is shown. Cancelable

BvModalEvent object. Call bvModalEvt.preventDefault() to cancel show

Prevent Bootstrap-Vue Modal From Opening

1 Answers