vue.js - BootstrapVue 模态在第一次点击时不显示，但在第二次点击时工作正常

Question

我在使用 BootstrapVue 中的 b-modal 组件时遇到问题，这是点击事件:

responseModal(activity) {
    this.$bvModal.show("responseModal");
    this.response.activity = activity;
}

按钮有以下代码:

<button @click="responseModal(activity)" v-if="activity.response_timestamp < time || !activity.my_activity && !activity.type.signup || (activity.response_confirmed || activity.response_declined)" type="button" class="btn btn-outline-hover-info btn-elevate btn-icon" style="align-self:flex-end">
    <span class="we-btn-flex"></span>
    <i class="la la-chevron-right"></i>
</button>

当我第一次点击按钮时，我的 Vue 检查器显示只有一个事件被触发:

但是直到我再次点击并且检查器显示很多事件被触发时模态才会出现

请注意，第一次点击发出 bv::show::modal，下一次点击发出 bv::modal::show，这再次触发以下命令显示在检查器中。对我做错了什么有什么建议吗？

Answer 1

我注意到了同样的问题...我解决了简单地在 this.$nextTick 中调用 this.$bvModal.show

例子:

this.$nextTick(function () {
    this.$bvModal.show('yourModalId');
})