Vue2でタブとモーダルを作成する一例を紹介します。
Vue2でBulmaのcssフレームワークを使ってタブを作成します。
仕組みはタブもモーダルも同じで、「どれがアクティブか」を表す変数をdataに持ち、:class="{ 'is-active': 条件 }"でBulmaのis-activeクラスを付け外しするだけです。
クリックで変数を書き換えれば、Vueが自動でクラスを更新してくれます。
この記事はVue 2のOptions API(data / methods)で書いていますが、同じ考え方はVue 3のOptions APIでもそのまま使えます。
タブの作成手順
- タブとモーダルになるリストを作成する
- 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()の引数に指定したコレクションを取得できます。
Firestoreを使っていない場合は、firestore()の部分を削り、dataのcategoriesに配列を直接入れれば同じように動きます。
methodsのsetCategory()は、クリックされたタブのタイトルをactiveCategoryに代入するだけです。
なお、aタグのhref=”#”のままだとクリックでページ先頭へスクロールすることがあります。
気になる場合は@click.prevent="setCategory(category.title)"のように.prevent修飾子をつけます。
v-forにはkey属性(:key="category.id"など)をつけておくと、Vueの警告が消え、並び替え時の再描画も正しくなります。
モーダルの作成手順
- モーダルとなる部分を作成する
- 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を示すクラスを動的に設定します。
動的にする方法は、タブと似た方法です。
showCategoryFormはdataでfalseを初期値にしておき、「カテゴリー作成」ボタンでshowCategoryForm = trueにすると開きます。
モーダルが閉じなくなる場合は、フォーム内のボタンがsubmitも兼ねていることが原因です。
上の例では@submit.preventで送信を止めているので動きますが、閉じるだけのボタンにはtype="button"をつけておくと安全です。
背景(modal-background)をクリックして閉じたい場合は、そのdivにも@click="showCategoryForm = false"を追加します。
Vueでの動的な表示切り替えの応用として、Vue.jsでライブラリを使わずに進捗バーの表示する方法やVue 3でスクロールすると出てくる「トップへ戻る」ボタンの作り方も同じ「変数でクラスを切り替える」考え方で作れます。
スクロールに応じて要素を表示する場合はVue.jsで要素がスクロール画面に現れたらアニメーションさせる方法を参考にしてみてください。