[Vuetify3]Vue.js3に対応したチェックボックスを使う方法[v-checkbox]

ついに先日2022年11月1日に満を持してリリースされた
Vuetify 3 (コードネーム：Titan)。

今回は、その Vuetify 3 の優れた数々のコンポーネントの中から、
v-checkbox の使用方法について、記事を書いていきたいと思います。

↑このような、綺麗にスタイリングされたチェックボックスを Vuetify 3 で作成できます。

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

v-checkboxの使用方法

では早速、v-checkboxの使用方法です。
と言っても、Vuetify側の基本形は、バージョン2のものとほとんど変わりません。

script内部の方は、 CompositionAPI にしっかり対応していて、しっかり動作してくれます。

と言うわけでまずはtemplate側の記述から。

[template側]

<v-container fluid>
  <p>{{ selected.item }}</p>
  <v-checkbox
    v-model="selected.item"
    label="Vue.js"
    value="Vue.js"
  ></v-checkbox>
  <v-checkbox
    v-model="selected.item"
    label="Vuetify3"
    value="Vuetify3"
  ></v-checkbox>
  <v-checkbox
    v-model="selected.item"
    label="Gatsby"
    value="Gatsby"
  ></v-checkbox>
  <v-checkbox
    v-model="selected.item"
    label="React"
    value="React"
  ></v-checkbox>
  <v-checkbox
    v-model="selected.item"
    label="WordPress"
    value="WordPress"
  ></v-checkbox>
</v-container>

↑Vuetify 2 の頃と、ほぼ同じ記述ですね。

気になるscript側の記述は、こんな感じで動作します。

[script側]

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

(上の例で使用しているのは、5行目で定義して15行目で return している、
selected という値のみになります。他のふたつの値は、この後のセクションで使用します)

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

実際に動かしてみると、単純に Vuetify が CompositionAPI 上で動作している！！
という事実にちょっと感動を覚えました。

色を変えてみる

Vuetify 2 の時と同様、
それぞれのコンポーネントには、渡すことのできる prop が複数存在していて
自由にさまざまなカスタマイズをすることが可能です。
たとえば color という prop を使うと、次の様なコードで
チェックボックスの色を変えることが可能です。

[template側]

<v-container fluid>
  <p>{{ selected2.item }}</p>
  <v-checkbox
    v-model="selected2.item"
    color="indigo"
    label="Vue.js"
    value="Vue.js"
  ></v-checkbox>
  <v-checkbox
    v-model="selected2.item"
    color="indigo"
    label="Vuetify3"
    value="Vuetify3"
  ></v-checkbox>
  <v-checkbox
    v-model="selected2.item"
    color="indigo"
    label="Gatsby"
    value="Gatsby"
  ></v-checkbox>
  <v-checkbox
    v-model="selected2.item"
    color="indigo"
    label="React"
    value="React"
  ></v-checkbox>
  <v-checkbox
    v-model="selected2.item"
    color="indigo"
    label="WordPress"
    value="WordPress"
  ></v-checkbox>
</v-container>

色変更以外にも、設定可能な複数の prop があります。
設定可能な prop 一覧については、
公式サイトの次のページに解説があります。
v-checkbox API — Vuetify

値を配列にすると、複数のチェックを扱うことができる

上でご紹介したケースは、いずれも
チェックするたびに値が更新される状態のものです。
ただし本来のチェックボックスとしての役割としては、複数の値を受け取れる様にしておく方がベターかと思います。

その方法ですが、これは単純に、setup内で定義するデータの値を配列としておくだけです。
それを v-checkbox と紐づけることで、複数の値をチェックする、チェックを外すというアクションと連動させることができます。
具体的には、次の様に書きます。

[template側]

<v-container fluid>
  <p>{{ selected3.item }}</p>
  <v-checkbox
    v-model="selected3.item"
    color="orange"
    label="Vue.js"
    value="Vue.js"
  ></v-checkbox>
  <v-checkbox
    v-model="selected3.item"
    color="orange"
    label="Vuetify3"
    value="Vuetify3"
  ></v-checkbox>
  <v-checkbox
    v-model="selected3.item"
    color="orange"
    label="Gatsby"
    value="Gatsby"
  ></v-checkbox>
  <v-checkbox
    v-model="selected3.item"
    color="orange"
    label="React"
    value="React"
  ></v-checkbox>
  <v-checkbox
    v-model="selected3.item"
    color="orange"
    label="WordPress"
    value="WordPress"
  ></v-checkbox>
</v-container>

紐づけるデータは、次の様になります。

[script側]

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

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

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

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

v-checkbox で使用する事ができる 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で実装する方法などもご紹介しています。ぜひあわせてご覧ください！！