[Vuetify3]Vue.js3に対応したスイッチを使う方法[v-switch]

ついに先日、2022年11月1日に満を持してリリースされた
Vuetify 3 (コードネーム：Titan)。
この記事を書いている現在(2022年11月15日)、早くも version 3.0.1 に更新されている様ですね。

今回は、その Vuetify 3 の優れた数々のコンポーネントの中から、
主に true/false の切り替えを扱える「スイッチ型のUIパーツ」を作る事ができる
v-switch の使用方法について、記事を書いていきたいと思います。

↑このような、設定操作等で使用できるスイッチ型のUIパーツを Vuetify 3 で作成できます。

なお、この記事を書いた際に Vue3, Vuetify3 を動作させている環境は次のとおりです。
参考までにご確認ください。
・Mac OS Montrey (12.3.1)
・Node.js v16.18.1
↑この Node.js のバージョンは、 Corepack が同梱されているバージョン( v16.10以降 )を使用することをお勧めします。

v-switchをVuetify3で使用する方法

それでは早速、v-switch を Vuetify3 で使用する方法を書いていきます。
前回(v-radio)、前々回(v-checkbox)の時と同様に、この v-switchコンポーネントも
template側に記述する基本形はバージョン2のものとほぼ変わりません。

そしてまた、前回(v-radio)、前々回(v-checkbox)とこれも同様なのですが
script内部の記述に関しては、 CompositionAPI にしっかり対応していて、きちんと動作してくれます。

それでは、まずはtemplate側の記述から書いていきます。

[template側]

<div>
  <p>{{ selected.item }}</p>
  <v-switch v-model="selected.item" label="Vue.js" value="Vue.js"></v-switch>
  <v-switch v-model="selected.item" label="Vuetify3" value="Vuetify3"></v-switch>
</div>

↑v-switch を使った「スイッチ型のUIパーツ」が縦に並ぶ基本的な例です。
(そんなページが果たして実案件で存在するのかはさておき…)

続いて、CompositionAPIの記法を使った
script側の記述は、次の様な形で動作します。

[script側]

<script>
  import { reactive } from 'vue'
  export default {
    setup() {
      const selected = reactive({
        item: 'false'
      })
      const selected2 = reactive({
        item: 'false'
      })
      const selected3 = reactive({
        item: []
      })
      const selected4 = reactive({
        item: 'false'
      })
      return {
        selected,
        selected2,
        selected3,
        selected4
      }
    }
  }
</script>

(selected, selected2, selected3, selected4 と値を4つ定義しているのは、サンプル用です(もちろんデータの名前は何でも良いです)。冒頭のtemplateに対応しているのは、5行目で定義して18行目で return している selected という値のみになります。他の3つの値は、この後のセクションで使用しています)

script側では、CompositionAPI の書き方を使用して、
setup関数の中に v-switch と紐づける v-model として使用する値を定義しています。

前回(v-radio)、前々回(v-checkbox) の際と同様に、
実際に動かしてみると、 Vuetify が CompositionAPI 上で動作している！！
という事実にちょっと感動すら覚えました。

v-switch の色を変えてみる

これについても前回(v-radio)、前々回(v-checkbox) の際で書いたことですが、
Vuetify 2 の時と同様に
それぞれのコンポーネントには、渡すことのできる prop が複数存在しており、
様々なカスタマイズをすることが可能になっています。

たとえば color という prop を使うと、次の様なコードで
スイッチの色を変えることできるわけですね。

[template側]

<div>
  <p>{{ selected2.item }}</p>
  <v-switch v-model="selected2.item" color="orange" label="Vue.js" value="Vue.js"></v-switch>
  <v-switch v-model="selected2.item" color="orange" label="Vuetify3" value="Vuetify3"></v-switch>
</div>

渡せる値は、これも
前回(v-radio)、前々回(v-checkbox)と同様に
material design に定義されている色名や
cssで指定できる値( color="#1AA1E5" や color="hsla(200, 80%, 50%, 1)" の様に指定 )
等を使用する事ができます。

スイッチをオン/オフする操作で、複数の値を扱うには

上で書いたセクションでは、いずれも
スイッチをオン/オフする操作で切り替わるのは1個の値についてです。

例えば、

・複数のスイッチが並んでいる設定画面などで、
・複数の項目のオン/オフを設定、
・その値を次のページに渡す。

そんなページがあったとします。

その際には、ひとつの v-model で複数の項目の値を保持しておく必要がありますよね。

そんな場合には、「データの値を配列として用意しておく」、
それだけで対応する事が可能になります。

具体的には、次の様に書きます。

[template側]

<div>
  <p>{{ selected3.item }}</p>
  <v-switch v-model="selected3.item" color="lime" label="Vue.js" value="Vue.js"></v-switch>
  <v-switch v-model="selected3.item" color="lime" label="Vuetify3" value="Vuetify3"></v-switch>
  <v-switch v-model="selected3.item" color="lime" label="Gatsby" value="Gatsby"></v-switch>
  <v-switch v-model="selected3.item" color="lime" label="React" value="React"></v-switch>
  <v-switch v-model="selected3.item" color="lime" label="WordPress" value="WordPress"></v-switch>
</div>

↑上記の例の様に、
複数のスイッチが並ぶ、なんらかの設定画面があったとします。

ひとつの v-model で、ひとつの v-model で複数の項目の値を保持しておく場合には、次の様に書きます。

[script側]

<script>
  import { reactive } from 'vue'
  export default {
    setup() {
      ...(中略)...
      const selected3 = reactive({
        item: []
      })
      return {
        ...(中略)...
        selected3
      }
    }
  }
</script>

↑あえて他の3つのデータを中略、として隠していますが、
この例の様に値を配列として定義しておき( item: [] となっている部分 )、 v-model で紐づけておくことで、
v-switch で複数の値を扱うことが可能になります。
この挙動は、v-checkbox と同じ挙動ですね。

スイッチの見た目を変える

inset という prop を使用すると、
v-switch の見た目を切り替える事が可能です。

デフォルトでは細めのスライダの上に円形のスイッチが乗っているデザインですが、
この inset という prop を使用すると、

「角丸長方形の中で円形のスイッチが動く」、

そんな見た目に変更する事ができます。具体的には次の様に書きます。

[template側]

<div>
  <p>{{ selected4.item }}</p>
  <v-switch v-model="selected4.item" color="indigo" inset label="Vue.js" value="Vue.js"></v-switch>
  <v-switch v-model="selected4.item" color="indigo" inset label="Vuetify3" value="Vuetify3"></v-switch>
</div>

↑好みやターゲットにもよると思いますが、こちらの見た目にすると、
より領域がしっかりしているため「スイッチ感」があって良いかもしれませんね。

Vuetify3 公式の v-switch 解説ページ

Vuetify3 公式の、v-switch についての公式解説ページは以下になります。
Switch component – Vuetify

v-switchで使用する事ができる props 一覧、詳細な使用がまとめられている公式ページは以下になります。
v-switch API — Vuetify

Vuetify3 のUIコンポーネントを実際に使ってみた他の記事

現時点で、Vuetify3のUIコンポーネントを実際に使ってみた記事は、次のものがあります。

※ 随時更新中です！！

この記事のまとめ

今回は前回(v-radio)、前々回(v-checkbox)に引き続いて、 Vuetify 3 の優れた数々のコンポーネントの中から

v-switch について、記事を書いてみました。

このスイッチ型のUIパーツは一見チェックボックスとよく似た挙動をするのですが
設定画面などで並べて使用する事で
とある特定の機能のオン/オフをする場合に
活躍する、
より視覚的にわかりやすく使ってもらう事ができるUIパーツかと思います。
（※逆に、「とある特定の機能に設定できる項目が複数存在する」ケースでは、他のUIパーツ(チェックボックス等)を使用するのが良いと思います。）

この記事が皆さんのより良いWeb制作体験につながれば、嬉しく思います。

※この記事は内容の品質向上を目的に、随時更新を行う場合があります。

この記事をシェアする：