我在如何使用vue.js
和laravel 5.3
显示引导模式时遇到了一些问题。我刚刚在vue model
内添加了blade.php
,但模态似乎无效。请参阅以下示例代码:
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">×</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 :(得分:1)
只需将show
课程和v-if="showModal"
添加到您的模态:
<div class="modal fade in show" tabindex="-1" role="dialog" v-if="showModal" aria-labelledby="myModalLabel">
建立一些很酷的东西!
答案 1 :(得分:0)
您的代码中没有任何内容可以触发它。如果您没有使用bootstrap的data-modal
,那么您需要使用Javascript API打开它:
http://getbootstrap.com/javascript/#via-javascript
即。您需要在Vue上调用以下方法:
$('#myModal').modal('show');