Radionappien käsittely Vuesa

Radionappien käsittely tapahtuu vastaavalla tavalla. Katsotaanpa käytännössä. Aluksi luomme ominaisuuden choice, jonka sidomme radio-ryhmään:

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

Luodaan nyt radio-ryhmä:

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

Kirjoitetaan jokaiselle niistä direktiivi v-model ja sidotaan se ominaisuuteen 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>

Annetaan myös jokaiselle oma value-arvonsa:

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>

Nyt ominaisuudessa choice tulee aina olemaan valitun radio-nappin value-arvo:

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