Vue.js で Bootstrap のモーダル

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">&times;</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() );
    }
  }
});

f:id:posturan:20191110131052j:plain
モーダル起動
f:id:posturan:20191108215746j:plain

    • -

注意:
このサンプルを 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>

と書くことです。