關於使用vue顯示模態的問題js

我在使用vue.js和laravel 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 
    } 
})

來源

2017-02-17 claudios

您正在切換showModal，但它在哪裏用於實際打開模式？ –

@ DavidK.Hess，是的，它應該使用vue在點擊事件上打開模態。 – claudios

沒有什麼在你的代碼來觸發它。如果你不使用引導程序的data-modal那麼你需要使用JavaScript API來打開它記錄在這裏：

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

即你需要在你的Vue公司的方法調用：

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

來源

2017-02-17 15:29:27

是的，我可以使用它的默認屬性顯示bootstrap模態，但是我們如何使用vue打開它？ – claudios

這不是我答案的要點嗎？你必須從Vue'method'調用Javascript。 –

@David K. Hess，也許你可以幫助我：https://stackoverflow.com/questions/45451971/how-can-i-display-modal-in-modal-on-vue-component –

只需添加show類和v-if="showModal"到您的模式：

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

建立一些很酷的東西！

來源

2017-02-17 18:18:44

關於使用vue顯示模態的問題js

回答

相關問題