vue jsでブートストラップモーダルダイアログを表示するには？

Question

私は、ブートストラップとvue jsを使ってモーダルダイアログを表示しようとしています。ユーザーが正常に登録するとダイアログを表示したい

<div> 
.... 
    <div class="modal fade" v-if="isEnabled"> 
     <div class="modal-dialog" role="dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
      <h5 class="modal-title">Modal title</h5> 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
       <span aria-hidden="true">&times;</span> 
      </button> 
      </div> 
      <div class="modal-body"> 
      <p>Modal body text goes here.</p> 
      </div> 
      <div class="modal-footer"> 
      <button type="button" class="btn btn-primary">Save changes</button> 
      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
     </div> 
    </div> 
.... 
</div> 

ただし、ダイアログを表示することはできません。誰でも私にこれを手伝うことができますか？

Answer 1

モーダルコンポーネントはjQueryによって管理されます。モーダルを開くにはjqueryを使用する必要があります。

私はあなたがマウント方法でモーダル、それは、ユーザーを登録し、それは、同期プロセスの場合

$('#modal').modal('show') 

を作るために、成功コールバックを待つために、AJAXリクエストの場合は、Vueのコードがあまりにも、多くのお手伝いを呼び出す必要がありますVueのインスタンス。例えばのための

Answer 2

：

あなたはクリックボタン上のモーダルボックスを表示したい場合は、その後

<button type="button" data-toggle="modal" data-target="#myModal">Open Modal</button> 

を使用して、任意のプロセスが終了した後のモデルボックスを開きたい場合は、その後

$('#modal').modal('show'); 

を使用

"#myModal"は、表示するモーダルボックスのIDです。

詳細https://www.w3schools.com/bootstrap/bootstrap_modal.asp