この記事は、Vuetify2.x の内容です。 Vuetify3.x の v-radio に対応した記事は、次になります。
[Vuetify3]Vue.js3に対応したラジオボタンを使う方法[v-radio]

Vuetifyで、綺麗なラジオボタンを使ってみる

VuetifyのUIコンポーネントを実際に試してみるシリーズの記事、16回目になります。
今回は、綺麗なラジオボタンを実装することができる
v-radio というコンポーネントについて、書いていきます。

今回の記事では、v-for を使った複数表示の方法についても
記事の後半に書いていますので、ぜひご覧ください。

↑この様に、配列でdataを用意しておいて v-for を使ってラジオボタンを表示してみます。

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

基本のコードをご紹介

<template>
  <v-radio-group v-model="myradio01">
    <v-radio
      label="Vue.js"
      value="Vue.js"
    ></v-radio>
    <v-radio
      label="Vuetify"
      value="Vuetify"
    ></v-radio>
    <v-radio
      label="WordPress"
      value="WordPress"
    ></v-radio>
  </v-radio-group>
</template>

↑この v-radio は、単体でも表示が可能ですが、
基本的には v-radio-group でラップして使用する事が推奨されています。
v-radio-group に v-model を指定することによって、
各ラジオボタンを選択した際の value の値を受け取る事ができます。

data については、次のように用意しておきます。初めから選択しておきたい値を、dataの初期値として設定しておきます。（初期値が不要なら、空にしておけば良いです）

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

実際に動くサンプル

今回も、実際に動くサンプルがあります。
次のリンクより、ご覧いただけます。
Vuetifyのラジオボタン(v-radio)のサンプル

設定可能なオプションなど

v-radio も、上記の基本形のほか、props に値を渡す事で、いくつかのオプションが指定できます。

色を変える

<template>
  <v-radio-group v-model="myradio02">
    <v-radio
      color="lime"
      label="Vue.js"
      value="Vue.js"
    ></v-radio>
    <v-radio
      color="lime"
      label="Vuetify"
      value="Vuetify"
    ></v-radio>
    <v-radio
      color="lime"
      label="WordPress"
      value="WordPress"
    ></v-radio>
  </v-radio-group>
</template>

↑color という prop に値を渡す事で、ラジオボタンの色が変更できます。
トグルスイッチやチェックボックス等、他のコンポーネントと同様に、
指定できる色は Material Color の色名指定、および css で指定可能な色が扱えます。

ラジオボタンの配置を縦横切り替える

<template>
  <v-radio-group v-model="myradio03" row="true">
    <v-radio
      color="lime"
      label="Vue.js"
      value="Vue.js"
    ></v-radio>
    <v-radio
      color="lime"
      label="Vuetify"
      value="Vuetify"
    ></v-radio>
    <v-radio
      color="lime"
      label="WordPress"
      value="WordPress"
    ></v-radio>
  </v-radio-group>
</template>

↑縦横配置を切り替える場合のサンプルです。
上記のように v-radio-group の row という prop に、true を渡す事で、
縦横配置を簡単に切り替える事ができます。

アクティブになった時にclassを付与する

↑この例では active-class という prop を使用して、classを付与しています。

<template>
  <v-radio-group v-model="myradio04" row="true">
    <v-radio
      active-class="is-active"
      color="lime"
      label="Vue.js"
      value="Vue.js"
    ></v-radio>
    <v-radio
      active-class="is-active"
      color="lime"
      label="Vuetify"
      value="Vuetify"
    ></v-radio>
    <v-radio
      active-class="is-active"
      color="lime"
      label="WordPress"
      value="WordPress"
    ></v-radio>
  </v-radio-group>
</template>

↑v-radio の active-class という prop に、class名を渡す事で、
アクティブになった時に付与するclassを指定できます。
あらかじめstyleを定義しておけば、いろいろな効果をかける事ができそうですね。

v-forを使った表示の方法

ここまでのセクションでは、
props にいろいろな値を渡す事で、さまざまなオプションを加える事ができる例を書きましたが、
同じ props をいちいち複数の v-radio にひとつずつ指定するのは、
あまり効率的とは言えませんよね。
そんな場合は、v-for を使って繰り返し表示するようにしてあげれば良さそうです。

<template>
  <v-radio-group v-model="myradio05">
    <v-radio
      v-for="n in 5"
      color="indigo"
      v-bind:key="n"
      v-bind:label="`${n}番目の選択肢`"
      v-bind:value="n"
    ></v-radio>
  </v-radio-group>
</template>

↑この場合は、label と value という props に、「dataをバインドする」という概念になるので、
文字通り v-bind:label のようにしてあげれば良い、と言う事ですね。
もちろん、省略形の :label として書くこともできます。

配列を用意しておいて、label、valueに値を渡す場合

上記の v-for="n in 5" のような書き方だと、
「n回目の選択肢」のように、繰り返し回数を使ったラベルしか表示させる事ができません。
label や value に自由に値を渡したい、かつ v-for で簡潔に表示させたい。
そんな場合には、以下のようにすれば可能です。

<template>
  <v-radio-group v-model="selected">
    <v-radio
      v-for="(item, index) in myarray"
      color="indigo"
      :key="index"
      :label="item"
      :value="item"
    ></v-radio>
  </v-radio-group>
</template>

dataは、次のように配列として、あらかじめ定義しておきます。

<script>
new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    myarray: [
      'Vue.js',
      'WordPress',
      'Vuetify',
      'Swiper',
      'Ionic'
    ],
    selected: 'Vue.js',
  }
});
</script>

↑配列として定義した myarray には、5件の値があるので、
v-for の対象となる要素に
順番に myarray の値が適用され、
v-radio の label と value という props に
順番に bind してくれる、というわけです。

そして、
v-radio-group に指定した v-model=”selected” で、
選択された v-radio の value の値を受け取る事ができます。

次のリンク先にある、
「Vuetifyのラジオボタン(v-radio)のサンプル」ページの末尾に、
この v-for を使って実際に表示してみたサンプルを制作してありますので
実際に動作している様子を確認する事ができます。

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

props を加えたサンプルについても、基本形のv-radioのサンプルの下に作成してあります。
次のリンクより、ご覧ください。
Vuetifyのラジオボタン(v-radio)のサンプル

Vuetify 3 の場合

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

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

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

ラジオボタン・コンポーネント — Vuetify

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

v-radio-group API — Vuetify

この記事のまとめ

今回は、Vuetify の豊富なUIコンポーネントの中から、
綺麗なラジオボタンを扱うことができる v-radio をご紹介しました。

また今回は、
v-for を使った
複数表示の方法についても記載しました。
この方法は、これまでご紹介してきた
トグルスイッチ、チェックボックスの例にも応用できる方法ですので、
それらを表示する場合にも、覚えておくと便利かもしれません。

こちらの v-radio というコンポーネントは
active-class という prop に値を渡す事で、
アクティブになった時に自由に class を付与する事ができるので、
それをうまく使うことで
cssによって柔軟に効果を適用できそうです。
そんなところも、このコンポーネントの使いやすそうな点ですね。

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

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