Vue2でタブとモーダルを作成する方法(Bulmaフレームワーク)

2021年4月24日Vue.js

Vue2でタブとモーダルを作成する一例を紹介します。
Vue2でBulmaのcssフレームワークを使ってタブを作成します。

タブの作成手順

• タブとモーダルになるリストを作成する
• activeを示すクラスが動的になるようにv-bindを使う
• activeを示すクラスが動的になるように、変数を作成する
• クリックなどイベントが発火したらactiveを示すクラスが指定されるようにメソッドを作成する

activeを示すクラスを動的にするためには、activeを示すクラスとactiveのときtrueとなるように変数を作成します。

Vue2でタブを作成する方法

<template>
  <div>
    <h1>ダッシュボード</h1>
    <div class="tabs">
      <ul>
        <li :class="{ 'is-active' : activeCategory === 'Newest'}">
          <a href="#" @click="setCategory('Newest')">最新記事</a>
        </li>
        <li v-for="category in categories" :class="{ 'is-active' : activeCategory === category.title}">
          <a href="#" @click="setCategory(category.title)">{{ category.title }}</a>
        </li>
      </ul>
    </div>
  </div>
</template>

まず、Bulmaをインストールして、App.vueにインポートします。
templateタグ内でBulmaの場合は、tabsクラスの中にulとliタグを使ってリストを作成します。
今回はカテゴリーをタブにするので、activeCategoryという変数を作成します。
is-activeクラスがついたら、それをactiveCategoryとしたいので、v-bindでis-activeクラスとactiveCategoryをひもづけます。
そして、その中のaタグがクリックされたらactiveCategoryがつくように、setCategory()メソッドを作成します。

<script>
// Vuefireでdbを定義
import { db } from '../firebase/config.js'


export default {
  name: 'dashboard',
  data() {
    return {
      categories: [],
      activeCategory: 'Newest',
    }
  },
  firestore () {
    return {
      categories: db.collection('categories')
    }
  },
  methods: {
    setCategory (title) {
      this.activeCategory = title
    }
  }
}</script>

scriptタグでは、templateタグ内で使用している変数をアクティブにするため、data()で初期値を設定します。
firebaseのfirestoreでデータベースを作成している場合は、それを設定しているファイルをインポートします。
上の例では、Vuefireをインストールして、dbという変数に格納している状態なので、firestore()でcollection()の引数に指定したコレクションを取得することができます。
methods()では、activeCategoryがクリックされたらそれを指し示すようにするために、呼び出されたら、タイトルを代入します。

モーダルの作成手順

• モーダルとなる部分を作成する
• activeを示すクラスが動的になるようにv-bindを使う
• activeを示すクラスが動的になるように、変数を作成する
• クリックなどイベントが発火したらactiveを示すクラスが指定されるようにメソッドを作成する

今回は、カテゴリー作成というボタンを押したら、inputタグでカテゴリーを入力できて、それをデータベースに登録するためのモーダルを作成します。

Vue2でモーダルを作成する方法

    <div class="modal" :class="{ 'is-active' : showCategoryForm }">
    <div class="modal-background"></div>
      <div class="modal-content">
        <form @submit.prevent="addCategory">
          <div class="field">
            <input type="text" class="input" v-model="title">
          </div>
          <div class="field">
            <button class="button is-primary" @click="showCategoryForm = !showCategoryForm">カテゴリーを追加</button>
          </div>
        </form>
      </div>
    </div>

templateタグでは、modalにしたい部分をmodalクラスで囲います。
その中に、背景となるdivタグとコンテンツになるdivタグを作成します。
activeになったときに現れるようにv-bindでactiveを示すクラスを動的に設定します。
動的にする方法は、タブと似た方法です。