ラジオボタン（input[type=”radio”]）を操作する [Vue.js]

複数の項目から1つを選択させるラジオボタンのオプションは、多くのWebアプリケーションで利用されています。
例えば、性別を選択するオプションであったり、ネットショッピングの支払い方法の選択などで見かけます。

Vue.jsではv-modelディレクティブを使ってフォームの入力コントロール（要素）に双方向（two-way）データバインディングを実装できます。

v-modelディレクティブをを使えば、ラジオボタン（type属性に”radio”を指定したinput要素）にデータをバインドして簡単に操作することができます。

今回は、Vue.jsでラジオボタンを操作する方法について紹介します。

v-modelディレクティブ

v-modelディレクティブは、フォームのラジオボタンにスクリプト側のVueインスタンス（JavaScript）で定義したデータを双方向にバインドします。
データを双方向にバインドすることで、Vueのインスタンスに定義してデータを変更することで画面（UI）のデータを更新し、画面のデータを変更するすることでVueインスタンスのデータを更新することができます。

ラジオボタンにv-modelでデータをバインドすると以下のようになります。

<input type="radio" v-model="データ" />

1	<input type="radio" v-model="データ" />

v-modelディレクティブは、ラジオボタンが持つcheckedプロパティとchangeイベントにバインドされます。
v-modelは糖衣構文（syntax sugar）で、v-bindディレクティブでcheckedプロパティにバインドし、v-onディレクティブでchangeイベントにバインドした場合と同様の動作になります。

<input type="radio" v-bind:checked="データ"
                    v-on:change="イベントメソッド" />

1 2	<input type="radio" v-bind:checked="データ" v-on:change="イベントメソッド" />

v-modelディレクティブについては、以下の記事にまとめていますので、参考にしてください。

v-bindディレクティブ、v-onディレクティブについても、以下の記事にまとめていますので、参考にしてください。

ラジオボタン（input[type=”radio”]）にデータをバインドする

まず、HTMLテンプレートにtype属性にradioを指定したinput要素を配置します。

<input type="radio" id="option1" value="option1" />
<label for="option1">オプション1</label>
<br>
<input type="radio" id="option2" value="option2" />
<label for="option2">オプション2</label>
<br>
<input type="radio" id="option3" value="option3" />
<label for="option3">オプション3</label>

<label for="option1">オプション1</label>

<br>

<label for="option2">オプション2</label>

<br>

<label for="option3">オプション3</label>

ここでは例として3つの要素を配置しています。

次に、JavaScript（プログラムのスクリプト）にラジオボタンにバインドするデータを定義します。

Vue.createApp({
  data: function() {
    return {
      picked: ''
    }
  }
}).mount('#app')

Vue.createApp({

data: function() {

return {

picked: ''

}

}).mount('#app')

JavaScript側にバインドするデータを定義したら、HTMLテンプレートに定義したinput要素にv-modelディレクティブを使用してデータをバインドします。

<div id="app">
  <input type="radio" id="option1" value="option1" v-model="picked" />
  <label for="option1">オプション1</label>
  <br>
  <input type="radio" id="option2" value="option2" v-model="picked" />
  <label for="option2">オプション2</label>
  <br>
  <input type="radio" id="option3" value="option3" v-model="picked" />
  <label for="option3">オプション3</label>
  <br>
  <span>選択オプション: {{picked}}</span>
</div>