Проблема с отображением модального использования с помощью vue js

У меня есть некоторая проблема с отображением мода загрузочного модала с использованием vue.js и laravel 5.3. Я только что добавил vue model внутри blade.php, но модальность кажется неработоспособной. Пожалуйста, смотрите пример кода ниже:Проблема с отображением модального использования с помощью 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, да, он должен открыть модальное событие click с помощью vue. – claudios

Там нет ничего в коде, чтобы вызвать его. Если вы не используете самозагрузки-х data-modal, то вам нужно использовать API Javascript, чтобы открыть его, описываемая здесь:

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

Т.е. вам нужен метод на вашем Vue, который вызывает:

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

источник

2017-02-17 15:29:27

Да, я могу показать bootstrap modal, используя его атрибуты по умолчанию, но как мы можем открыть его с помощью vue? – claudios

Разве это не весь смысл моего ответа? Вы должны вызывать Javascript из метода Vue'. –

@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

ответ

Смежные вопросы