BootstrapVue modal JS call not show modal

Question

I'm going crazy with this "issue".

This is my code (only essential parts):

• HTML:

  <b-button variant="primary" block class="mb-3" v-on:click="setUpdateGraph" :disabled="updateGraphReq">Update</b-button>
  
  <b-modal id="time-filter-error" size="lg" title="Time filter error" ok-only>
   <b-row>
    Error.
   </b-row>
  </b-modal>
  

• JS:

  var app1 = new Vue({
  el: '#app',
  components: {
  }, // --- End of components --- //
  data: {
    startDate: '',
    startTime: '',
    endDate: '',
    endTime: '',
    updateGraphReq: false
    }, // --- End of data --- //
    methods: {
     setUpdateGraph: function () {
      if(this.startDate == '' || this.startTime == '' || this.endDate == '' || 
         this.endTime == '')
        {
            $("#time-filter-error").modal('show');
        }
        else
        {
            this.updateGraphReq = true;
            this.sendData();
        }
    }
  

I'm designing a page with Bootstrap Vue and I'm trying to open a popup via JS to check when show the modal or execute other stuff. If I open it normally, directly pressing a button, everything is fine; but when I use JS press the button nothing happens, also no error in the console. I've checked all similar isssues on the internet but nothing working for me... The only similar way to work this message is using the alert function but it's not what I'm looking for.

I've also tried to name the modal in camelCase (timeFilterError) instead of kebab-case (time-filter-error) but same situation...

Thanks for the help.

Answer 1

If you installed BootstrapVue as a plugin you could replace:

$("#time-filter-error").modal('show');

by:

this.$bvModal.show('time-filter-error')