Vue.js(Nuxt.js)でBulmaのModalを使う方法

2021/01/12

#Vue.js/Nuxt.js

今回はVue.js・Nuxt.jsでBulmaのModalを使う方法を書きます。

Modalを実装


ModalのHTML

<button @click="on">表示</button>
<div class="modal" v-bind:class="modal_class">
  <div class="modal-background" @click="on"></div>
     <div class="modal-card">
        <header class="modal-card-head">
           <p class="modal-card-title">Modal title</p>
           <button class="delete" aria-label="close"  @click="on"></button>
        </header>
        <section class="modal-card-body">
           <!-- Content ... -->
        </section>
        <footer class="modal-card-foot">
           <button class="button is-success">Save changes</button>
          <button class="button" @click="on">Cancel</button>
        </footer>
    </div>
</div>


JavaScript

export default {
    data(){
        return {
          modal_class:""
        }
    },
    methods:{
      on:function(){
        if (this.modal_class == "is-active"){
          this.modal_class = ""
        }else{
          this.modal_class = "is-active"
        }
      }
    }
}


HTMLはBulma公式のドキュメントに載っていたコードをそのまま使用しています。

BulmaのModalはclassにis-activeを入れると表示、外すと非表示になるのでbuttonをクリックしたときにclassの値を書き換える処理を実装しています。

参考サイト


関連記事:Vue.js/Nuxt.js

Nuxt.js + microCMS + Nuxt Contentでブログを作り直してみた

Vue.js/Nuxt.js

[Nuxt.js]動的なルーティングを含めてgenerateする方法

Vue.js/Nuxt.js

[Nuxt.js]nuxt.config.jsに環境変数を定義してプログラムから読み込む方法

Vue.js/Nuxt.js