BootstrapVue 模态在第一次单击时未显示，但在第二次单击时工作正常答案

【问题标题】：BootstrapVue modal not showing on first click but works fine on second clickBootstrapVue 模态在第一次单击时未显示，但在第二次单击时工作正常
【发布时间】：2020-04-27 21:41:42
【问题描述】：

我在使用 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，这再次触发检查器中显示的以下命令。关于我做错了什么有什么建议吗？

【问题讨论】：

这里也一样！你找到解决办法了吗？
老实说，我忘记了我的解决方案最终是什么。今晚我会检查我的代码，然后回复你:-)
再次查看官方文档示例，一切正常。在 bsvue 表格组件的 v-slot:cell 中使用它，我可能只是错误地在模态组件上关联了一个动态 ref 道具。 ????

标签： vue.js bootstrap-modal bootstrap-vue

【解决方案1】：

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

例子：

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

【讨论】：

【解决方案2】：

在我的例子中，它与 v-if 子句有关。通过删除它，第一次单击工作正常。我是从this answer 那里得到的。

【讨论】：