Vueでのラジオボタンの操作

ラジオボタン の操作も同様の方法で行います。実際に見てみましょう。 まず、radioグループにバインドするプロパティ choiceを作成します：

javascriptdata() {
  return {
    choice: '',
  }
}

次に、radioグループを作成します：

App.vue<template>
  <input name="radio" type="radio">
  <input name="radio" type="radio">
  <input name="radio" type="radio">
</template>

それぞれにディレクティブv-modelを記述し、 プロパティchoiceにバインドします：

App.vue<template>
  <input name="radio" type="radio" v-model="choice">
  <input name="radio" type="radio" v-model="choice">
  <input name="radio" type="radio" v-model="choice">
</template>

さらに、それぞれに独自のvalueを設定します：

App.vue<template>
  <input name="radio" type="radio" v-model="choice" value="v1">
  <input name="radio" type="radio" v-model="choice" value="v2">
  <input name="radio" type="radio" v-model="choice" value="v3">
</template>

これで、プロパティchoiceには常に 選択されたradioのvalueが 格納されるようになります：

App.vue<template>
  you choosed: {{ choice }}
</template>