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公式ページは以下です。
また、公式APIページはこちらになります。他のコンポーネント同様、設定できる props
の一覧が記載されています。
v-checkbox API — Vuetify
【応用編: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 に関する記事を掲載していく予定です。
※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。