[Vuetify3]Vue.js3に対応したラジオボタンを使う方法[v-radio]

[Vuetify3]Vue.js3に対応したラジオボタンを使う方法[v-radio]
この記事をシェアする:
ついに先日、2022年11月1日に満を持してリリースされた
Vuetify 3 (コードネーム:Titan)

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

なお、この記事を書いた際に Vue3, Vuetify3 を動作させている環境は次のとおりです。
参考までにご確認ください。

・Mac OS Montrey (12.3.1)
・Node.js v16.18.1
↑この Node.js のバージョンは、 Corepack が同梱されているバージョン( v16.10以降 )を使用することをお勧めします。

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

では早速、v-radioVuetify3 で使用する方法です。
こちらのコンポーネントも、template側に記述する基本形は、バージョン2のものとほぼ変わりません。

前回の v-checkbox と同様に、
script内部に記述する方は、 CompositionAPI にしっかり対応していて、きちんと動作してくれます。

それでは、まずはtemplate側の記述から。

[template側]

<div>
  <p>{{ selected.item }}</p>
  <v-radio-group v-model="selected.item">
    <v-radio label="Vue.js" value="Vue.js"></v-radio>
    <v-radio label="Vuetify3" value="Vuetify3"></v-radio>
    <v-radio label="Gatsby" value="Gatsby"></v-radio>
    <v-radio label="React" value="React"></v-radio>
    <v-radio label="WordPress" value="WordPress"></v-radio>
  </v-radio-group>
</div>

↑v-radio を使ったラジオボタンが縦に並ぶ基本的な例です。
[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>

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

script側では、CompositionAPI の書き方を使用して、
setup関数の中に v-radio と紐づける v-model として使用する値を定義しています。
なお、v-radio は単体でも使用可能ですが通常は
v-radio-group の中に書いた方が何かと便利です。(その場合 v-modelv-radio-group に紐付けます)

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

v-radio の色を変えてみる

こちらも前回 v-checkbox の際にも書いたことですが、Vuetify 2 の時と同様に
それぞれのコンポーネントには、渡すことのできる prop が複数存在していて
様々なカスタマイズをすることが可能になっています。
たとえば color という prop を使うと、次の様なコードで
ラジオボタンの色を変えることできるわけです。

[template側]

<div>
  <p>{{ selected2.item }}</p>
  <v-radio-group v-model="selected2.item">
    <v-radio color="orange" label="Vue.js" value="Vue.js"></v-radio>
    <v-radio color="orange" label="Vuetify3" value="Vuetify3"></v-radio>
    <v-radio color="orange" label="Gatsby" value="Gatsby"></v-radio>
    <v-radio color="orange" label="React" value="React"></v-radio>
    <v-radio color="orange" label="WordPress" value="WordPress"></v-radio>
  </v-radio-group>
</div>

渡せる値は、material design に定義されている色名
cssで指定できる値( color="#1AA1E5"color="hsla(200, 80%, 50%, 1)" の様に指定 )
等を使用する事ができます。

水平方向への並び替えも簡単

v-radio のデフォルトの並びは縦方向です。
これを inline という prop ひとつで簡単に
水平方向(横方向)の並びに変更することが可能です。

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

[template側]

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

↑上記の例の様に、
inline という prop を、v-radio-group に付与して有効にするだけです。
これで、水平方向(横方向)に並んだラジオボタンに変更できます。

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

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

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

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

現時点で、Vuetify3のUIコンポーネントを実際に使ってみた記事は、次のものがあります。
[Vuetify3]Vue.js3に対応した綺麗なボタンを使う方法[v-btn]
[Vuetify3]Vue.js3に対応したスイッチを使う方法[v-switch]
[Vuetify3]Vue.js3に対応したラジオボタンを使う方法[v-radio]
[Vuetify3]Vue.js3に対応したチェックボックスを使う方法[v-checkbox]
※ 随時更新中です!!

この記事のまとめ

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

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

色変更のセクションでも書きましたが、Vuetify を使ってみると
マテリアルデザインの概念や、propに関する知識も自然と身についてくるので
この辺りも個人的に Vuetify が好きな理由です。

また、記事の中段でも書きましたが、こうして実際に Vuetify3 のUIコンポーネントを動かしてみると、
単純に「 VuetifyCompositionAPI 上で動作している!!」
という事実にちょっと感動すら覚えています。

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

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

この記事をシェアする: