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">×</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
}
})
あなたはshowModalを切り替えていますが、それは実際にモーダルを開くためにどこに使用されていますか? –
@ DavidK.Hess、はい、vueを使用してクリックイベントをモーダルで開く必要があります。 – claudios