【学習記録】Buefyでモーダル画面の実装

最近担当したタスクでVue.jsとBuefyでモーダル画面を実装して、Buefyを使ったモーダル画面の実装方法がわかってきたのでメモします。

モーダル画面の実装は、基本的に公式ドキュメントに書かれているコードをアレンジする形でできました。

buefy.org

以下のようにモーダル画面を呼び出すボタンを準備します。

<b-button
        label="Launch image modal"
        type="is-primary"
        size="is-medium"
        @click="isImageModalActive = true" />

labelは画面に表示する文言んで、typeはボタンの色、sizeはボタンのサイズ、@clickでクリック時の動作を設定します。
上記のコードでは先にisImageModalActiveというブーリアンの変数を定義しておいて、ボタンがクリックされたらtrueに変わるように実装しています。

次に実際のモーダル画面を以下のように実装します。

<b-modal v-model="isImageModalActive">
            <p class="image is-4by3">
                <img src="/static/img/placeholder-1280x960.png">
            </p>
        </b-modal>

b-modalタグはモーダル画面用なのでv-modelに指定されている変数がtrueの時のみ表示されます。
あとはb-modal内で必要な画面の実装を追加できます。