[Vue.js]Vuetifyでシンプルなトグル型スイッチを表示する方法[v-switch]

この記事は、Vuetify2.x の内容です。 Vuetify3.x の v-radio に対応した記事は、次になります。
[Vuetify3]Vue.js3に対応したスイッチを使う方法[v-switch]

Vuetifyでトグル形式のスイッチを使ってみる

VuetifyのUIコンポーネントを実際に試してみるシリーズの記事、14回目になります。
今回は、トグル形式（オンの時は次の操作がオフに、オフの時は次の操作がオンになるタイプのやつの事です）
のスイッチを実装することができる
v-switch というコンポーネントについて、書いていきます。

↑こんな感じの、トグル形式のスイッチを表示してみます。

Vuetifyの導入方法について等は、以前の記事：
[Vue.js]Vuetify のUIコンポーネントを使ってみる[v-slide, v-caroucel編] にCDN経由での導入方法を、
[Vue.js] Vuetify を導入して Material Design をスマートに取り入れる方法内に、CLI経由での導入方法 をご紹介しています。あわせてご覧ください。

早速、基本のコードをご紹介

<template>
  <v-switch v-model="mytoggle" />
</template>

↑本当にこれだけです。
Vuetify にあらかじめ定義されているコンポーネントを呼び出しているだけなので、
当然といえば当然なのですが、いつも以上にシンプルで良いですね。

解説など

とてもシンプルな構造なので、解説することはあまりないですけど、すこしだけ。
解説というより、どんなオプションがあるのか、次のセクションを見てもらった方が早いかもしれません。

上記の通り、基本形としては1行で表示可能です。

data は、こんな感じで普通に用意しておけば大丈夫です。
おわかりとは思いますが、最初にオフにしておきたい場合は値を false にしておけば良い、ということですね。

<script>
new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    mytoggle: true,
  }
});
</script>

実際に動くサンプル

今回も、実際に動くサンプルを作成してあります。
次のリンクより、ご覧ください。
Vuetifyのトグル型スイッチサンプル

そのほかのオプション(props)など

この、 v-switch ですが、上記の基本形のほか、アイコンをつけたり、色を変えたり、複数の値を扱ったりできます。

アイコンをつける

<template>
  <v-switch
    v-model="mytoggle"
    messages="Night"
    prepend-icon="mdi-weather-night"
  />
</template>

↑prepend-icon という props を指定して、material-design-icons のアイコン名を指定してあげると、
先頭にアイコンを付けることができます。
また、messages という props を指定すると、トグルスイッチの下にメッセージを表示できます。
material-design-icons については、この導入編の記事を参照してください。
ページの中程に、material-design-icons の読み込み方が書いてあります。

色を変える

<template>
  <v-switch
    v-model="mytoggle"
    color="indigo"
  />
</template>

↑color という props を指定すると、トグル型スイッチの色が変更できます。
指定できる色は、Material Color の色名指定、および css で指定可能な色です。

角丸で包括されたタイプや、フラットなトグルスイッチにする

<template>
  <v-switch
    v-model="mytoggle"
    inset
  ></v-switch>
</template>

<template>
  <v-switch
    v-model="mytoggle"
    flat
  ></v-switch>
</template>

inset という props を指定すると、角丸で包括されたタイプのトグルスイッチに変わります。
flat という props を指定すると、elevation の概念を持たない、フラットなトグルスイッチに変わります。

複数の値に対応したトグルスイッチ

<template>
  <v-switch
    v-model="like"
    label="Vue"
    value="vue"
  ></v-switch>
  <v-switch
    v-model="like"
    label="Wordpress"
    value="wordpress"
  ></v-switch>
  <v-switch
    v-model="like"
    label="JavaScript"
    value="javascript"
  ></v-switch>
</template>

↑上記のように複数のスイッチを並べ、同じ v-model を指定。
data側で、配列の data を紐づけてあげるだけです。
例えば、設定画面で複数のトグルスイッチをオンオフできるようにしておいて、次のページに渡す、
のようなシーンで使えそうですね。

<script>
new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    like: ['vue'],
  }
});
</script>

↑このように、配列の data を用意して、v-model で紐づけるだけです。
最初からオンにしておきたい値は、data のデフォルト値で入れておけば良いです。

`props` を加えたサンプル

各種 props を加えたサンプルを、先ほどの基本形の下に作成してあります。
次のリンクより、ご覧ください。
Vuetifyのトグル型スイッチサンプル

公式ドキュメント、APIページなど

v-switch コンポーネントの Vuetify公式ページは以下です。

スイッチ・コンポーネント — Vuetify

また、公式APIページはこちらになります。他のコンポーネント同様、設定できる各種 props 項目の一覧が記載されています。
v-switch API — Vuetify

Vuetify 3 の場合

Vue3.x 系統で Vuetify 3 を使用した場合の v-switch の記事を執筆しました！ぜひあわせてご覧ください！！（当ページの記事は、Vue2.x系統でVuetify 2 を使用した内容です。）
[Vuetify3]Vue.js3に対応したスイッチを使う方法[v-switch]