BootstrapVue模态JS调用不显示模态

问题描述

我为这个“问题”发疯。

这是我的代码（仅重要部分）：

• 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();
        }
    }
  

我正在用Bootstrap Vue设计一个页面，并且试图通过JS打开一个弹出窗口，以检查何时显示模式或执行其他内容。 如果我正常打开它，直接按一个按钮，一切都很好；但是当我使用JS按下按钮时，什么也没有发生，控制台中也没有错误。 我已经在互联网上检查了所有类似的问题，但没有任何帮助。 处理此消息的唯一类似方法是使用警报功能，但这不是我想要的。

我也尝试过在camelCase（timeFilterError）中命名模式，而不是kebab-case（time-filter-error），但情况相同...

感谢您的帮助。

解决方法

如果您将BootstrapVue作为插件安装，则可以替换：

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

作者：

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