2017-02-17 9 views
0

vue.jslaravel 5.3を使ってブートストラップモーダルを表示する方法に問題があります。私はblade.phpの中にvue modelを追加しましたが、モーダルは機能していないようです。以下のサンプルコードを参照してください。vue jsを使用してモーダルを表示する際の問題

HTML:

<div id="project"> 
    <button class="btn btn-primary" @click="showModal = true"><i class="icon-plus"></i> Add new</button> 
<!-- Modal --> 
<div class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel">Add Project</h4> 
     </div> 
     <div class="modal-body"> 
     <form> 
      <div class="row"> 
       <div class="col-md-12"> 
        <div class="form-group"> 
         <input type="text" name="title" class="form-control" required="required" placeholder="Project Title"> 
        </div> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-md-6"> 
        <div class="form-group"> 
         <input type="date" name="date" class="form-control" required="required" placeholder="Project Date"> 
        </div> 
       </div> 
       <div class="col-md-6"> 
        <div class="form-group"> 
         <input type="text" name="category" class="form-control" required="required" placeholder="Project Category"> 
        </div> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-md-12"> 
        <textarea name="desc" id="inputDesc" class="form-control" rows="3" placeholder="Project Description"></textarea> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-md-12"> 
        <div class="form-group"> 
         <div class="dropzone" id="project-thumbnail"> 
         </div> 
      </div> 
       </div> 
      </div> 
     </form> 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
    </div> 
</div> 
</div> 

スクリプト:

new Vue({ 
    el: '#project', 
    data: { 
      showModal: false 
    } 
}) 
+0

あなたはshowModalを切り替えていますが、それは実際にモーダルを開くためにどこに使用されていますか? –

+0

@ DavidK.Hess、はい、vueを使用してクリックイベントをモーダルで開く必要があります。 – claudios

答えて

0

それをトリガーするためにあなたのコード内では何もありません。あなたは、ブートストラップのdata-modalを使用していないなら、あなたはそれがここに文書開くには、JavaScriptのAPIを使用する必要があります。

http://getbootstrap.com/javascript/#via-javascript

すなわち、

$('#myModal').modal('show'); 
+0

ええ、私はブートストラップモーダルをデフォルト属性を使って表示できますが、どのようにしてvueを使って開くことができますか? – claudios

+0

それは私の答えの要点ではありませんか?あなたはVueの 'メソッド'からJavascriptを呼び出さなければなりません。 –

+0

@David K. Hess、多分あなたは私を助けることができます:https://stackoverflow.com/questions/45451971/how-can-i-display-modal-in-modal-on-vue-component –

1

ちょうどあなたのモーダルにshowクラスとv-if="showModal"を追加します:あなたはあなたの呼び出しをVueの上のメソッドを必要とする

<div class="modal fade in show" tabindex="-1" role="dialog" v-if="showModal" aria-labelledby="myModalLabel"> 

クールな何かを構築します!

関連する問題