vuejs2 - 在 vuejs 中显示另一个模态框后，模态框会自动隐藏。

Question

I am using import bModal from 'bootstrap-vue/es/components/modal/modal'; bootstrap-modal

我在模态中有以下用户界面，这里我需要从下拉列表中选择部门(使用 AJAX 获取项目列表)。在这里，我想通过单击下拉菜单旁边的按钮轻松添加新部门 - 对于带有 UI 的弹出模式。

在 vuejs 中，我有主模式的代码 -

showModal () {
  this.clearForm();
  this.formInfo.formSubmitted = false;
  this.$refs[this.modalInfo.id].show();
}

这工作正常。现在，在绿色按钮上的单击事件上，应该在当前打开的窗口上打开另一个模式。不幸的是，当前模式被隐藏并打开了新模型。我有以下额外模态代码-

showExtraModal:function(){
    this.$refs['extraModal'].show();
}

如何在 vue js 中解决这个问题。

Answer 1

似乎是 Bootstrap 的限制(请参阅 docs ):

Bootstrap only supports one modal window at a time. Nested modals aren’t supported as we believe them to be poor user experiences.

由于 bootstrap-vue 只是 Bootstrap 的包装器，因此可能会应用相同的限制。

我对纯 Bootstrap 也有类似的问题； IIRC 我通过改变模态的内容来解决这个问题，而不是显示一个新的内容(用 Vue 的话说:渲染一个不同的组件)，有点像模态内部的迷你路由。