bootstrap-vue.js を使わずに、Vue.js で動かす Bootstrap のモーダル
でも、、bootstrap-vue.min.css を使う。。
head タグに書くもの (サンプルなのでCDN)
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" /> <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" /> <script src="https://code.jquery.com/jquery-3.4.1.min.js" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
Vue.js は、運用では配布される中の deployment の vue.min.js を使うべき。。
head タグと body の後で、Vue.js の記述を script で読み込ませる。
<body> <div class="container-fluid all"> <h1>Vue.js + Bootstrap モーダル</h1> <div id="sample" class="col-md-12"> <button type="button" class="btn btn-secondary custom-btn-in" data-toggle="modal" data-target="#exampleModal">設定</button> <!-- モーダルウィンドウ --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <!-- モーダルヘッダー --> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel" >タイトル</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <!-- モーダル本文 --> <div class="modal-body"> <div class="form-group row"> <label for="user" class="col-3">Name</label> <input type="text" name="userName" id="userName" class="col-3 form-control"> </div> </div> <!-- モーダルフッター --> <div class="modal-footer"> <button type="button" class="btn btn-primary" v-on:click="modalSubmit" data-dismiss="modal">更新</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button> </div> </div> </div> </div> </div> </div> </body> <script src="modal-sample.vue"></script>
modal-sample.vue の内容
var app = new Vue({ el: '#sample', methods: { modalSubmit: function(e){ console.log( $('#userName').val() ); } } });
モーダル起動
-
- -
注意:
このサンプルを chrome で自PCで書いて、ページをひらいた時、
modal-sample.vue を読込みで以下のエラーメッセージが出ることがあります。
(PyCharm や、InteliJ で Html を「ブラウザで開く」のビルトインWebサーバで開く時など、、 )
because its MIME type ('application/octet-stream') is not executable,
and strict MIME type checking is enabled.
Webアプリケーションサーバが、外部scriptファイルが返す応答ヘッダに
Content-Type: text/javascript
を返すようにしていれば、起きないのですが、これを回避するには、<script> を書く時に、
type= を省略することなく、
ちゃんと、
<script src="modal-sample.vue" type="JavaScript"></script>
と書くことです。