BootstrapVue模态JS调用不显示模态

Question

我快被这个“问题”弄疯了。

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

• 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) 命名模态，但情况相同...

感谢您的帮助。

Answer 1

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

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

作者：

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