[Vue.js]Vuetifyでシンプルかつ綺麗なチェックボックスを使用する方法[v-checkbox]

Vuetifyの記事_v-checkboxについて

Vue3.x 系統で Vuetify3 を使用した場合の記事を執筆しました!ぜひあわせてご覧ください!!(当ページの記事は、Vue2.x系統でVuetify2を使用した内容です。)
[Vuetify3]Vue.js3に対応したチェックボックスを使う方法[v-checkbox]

Vuetifyでシンプルかつ、綺麗なチェックボックスを使ってみる

VuetifyのUIコンポーネントを実際に試してみるシリーズの記事、15回目になります。
今回は、シンプルかつ綺麗な
チェックボックスを実装することができる
v-checkbox というコンポーネントについて、書いていきます。

↑こんな感じの、綺麗なチェックボックスが簡単に表示できます。このムービーの例のように、複数のチェックボックスの値を、ひとつのv-modelで受け取る事が可能です。

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

基本のコードをご紹介

<template>
  <v-checkbox v-model="mycheck" />
</template>

↑こちらも、前回同様シンプルですね。
前回も書きましたが、これは、Vuetifyにあらかじめ定義されている
コンポーネントを呼び出しているという概念になります。
(このコンポーネントを呼び出す、と言うか
コンポーネント化、という概念について踏み込んで理解していくと、やがて
props$emit の話に辿り着くのですが、
それはまた別の機会に書けたらと思います。)

解説など

こちらも、とてもシンプルなコンポーネントですので、
どんなオプションがあるのか、次のセクションを見てもらった方が早いかもしれません。

トグル型スイッチの時と同様に、基本形としては1行で表示可能です。

data も、シンプルに次のように用意しておけば大丈夫です。
前回同様、あらかじめチェックを入れておきたければ値を true にしておけば良い、ということです。

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

実際に動くサンプル

今回も、実際に動くサンプルがあります。
次のリンクより、ご覧いただけます。
Vuetifyのチェックボックスサンプル

その他、オプションなど

v-checkbox にも、上記の基本形のほか、いくつかのオプションが指定できます。
(※正確にはオプションというより、 props と呼ばれるものです)

色を変える

<template>
  <v-switch
    v-model="mycheck"
    color="lime"
  />
</template>

↑color オプション(※正確には props )を指定すると、チェックボックスの色が変更できます。
これもトグル型スイッチと同じで、
指定できる色は、Material Color の色名指定、および css で指定可能な色が使えます。

複数のチェックボックス群の値をひとつのv-modelで受け取る

<template>
  <v-checkbox
    v-model="osushi"
    label="Maguro"
    value="maguro"
  ></v-checkbox>
  <v-checkbox
    v-model="osushi"
    label="Buri"
    value="buri"
  ></v-checkbox>
  <v-checkbox
    v-model="osushi"
    label="Hamachi"
    value="hamachi"
  ></v-checkbox>
</template>

↑上記のように複数のチェックボックスを並べ、同じ v-model を指定。
data側は次のように、配列として data を用意しておくだけです。

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

↑配列の data を用意して、v-model で紐づけます。
チェックを入れて置きたい項目は、data のデフォルト値で入れておけば良いです。

オプション( props )を加えたサンプル

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

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

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

チェックボックス・コンポーネント — Vuetify

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

【応用編:v-text-field との併用】チェックを入れたら入力可能になるテキストフィールドをつくる方法

この記事でご紹介している v-checkbox ですが、v-text-field と組み合わせて使う事で、「チェックを入れたら入力可能になるテキストフィールド」の様な仕組みもつくる事ができます。その方法に関しては、以下のリンク先の記事で詳しくご紹介しています!
checkboxにcheckを入れたら入力可能になるテキストフィールド3つ[Vue3, Vuetify, VanillaJSそれぞれによる方法]
↑この記事では、Vuetify3 による方法のほか、Vuetify を使わずに Vue.js3 のみでの方法、また、Vuetify も Vue.js も使わずに、素のJavaScriptで実装する方法などもご紹介しています。ぜひあわせてご覧ください!!

Vuetify3 の場合

Vue3.x 系統で Vuetify3 を使用した場合の記事を執筆しました!ぜひあわせてご覧ください!!(当ページの記事は、Vue2.x系統でVuetify2を使用した内容です。)
[Vuetify3]Vue.js3に対応したチェックボックスを使う方法[v-checkbox]

この記事のまとめ

今回は、Vuetify の数々のUIコンポーネントの中から、
シンプルかつ綺麗なチェックボックスを扱うことができる v-checkbox をご紹介しました。

Vuetify公式の、v-checkboxのコンポーネントページでも言及されている通り
このチェックボックスというUIパーツは、
true, false の2択を提供する」という点で、
前回ご紹介したトグル型スイッチと機能的にはよく似ています。

しかし、その提供される場所にそれぞれ適した場所があって、
こちらのチェックボックスの場合は

・ひとつの設問に対する選択項目が複数あって、それを能動的に、かつ同時に複数選択できる場合
・文書があって、その内容へ同意する事に、明示的にチェックマークをつけてもらう場合

等のケースでよく見かけるUIパーツだと思います。

Vuetifyのチェックボックスは、シンプルながら
カラーのカスタマイズ等もしやすく、どんなデザインのページに置いても合いそうで良いですね。

当サイトでは今後も Vue.js、 Vuetify に関する記事を掲載していく予定です。

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

この記事をシェアする: