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

Question

  

我正在使用import bModal from 'bootstrap-vue/es/components/modal/modal'; bootstrap-modal

我在Modal中有以下用户界面，在这里我需要从下拉列表中选择部门（使用AJAX获取项目列表）。在这里，我想通过单击dropdonw旁边的按钮来轻松添加新部门 - 对于具有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一次只支持一个模态窗口。不支持嵌套模态，因为我们认为它们是糟糕的用户体验。

由于<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <div id="singleQuestionModule"> <form class="form-group"> <div class="input-group input-group"> <label id="wQuestionLabel" class="form-control-label" style="width: 540px;" for="wQuestion">Question:</label> </div> <!-- The Question Inputfield that needs ID--> <div class="input-group input-group"> <input type="text" class="form-control" aria-label="" id="wQuestion" style="width: 540px;"> </div> <div class="input-group input-group"> <label id="questionOptions" class="form-control-label" style="width: 540px;" for="wQuestion">Enter avaible options:</label> </div> <!-- The radio buttons and option input fields that need ID's--> <div class="input-group input-group"> <span class="input-group-addon"> <input type="radio" name= "q" id="option1" aria-label=""> </span> <input type="text" class="form-control" aria-label="" style="width: 540px;"> </div> <div class="input-group input-group"> <span class="input-group-addon"> <input type="radio" name="q" id="option4" aria-label=""> </span> <input type="text" class="form-control" aria-label="" style="width: 540px;"> </div> <!-- The Add and Save Test Buttons--> <span class="options-label"></span> <br> <div class="form-group row"> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-success" id="radioAddQuestion"> <input type="radio" @click="counter += 1" name="options" autocomplete="off">Add Question</label> <label class="btn btn-success"> <input type="radio" name="options" id="radioSaveTest" value="saveTest()" autocomplete="off">Save Test </label> </div> </div>只是Bootstrap的包装器，因此可能适用相同的限制。

纯粹的Bootstrap我遇到了类似的问题; IIRC我通过改变模态的内容而不是显示新的内容来解决它（在Vue中说：渲染一个不同的组件），在模态中的一种迷你路由。