Werken met radio in Vue

Werken met radio verloopt op een vergelijkbare manier. Laten we het in de praktijk bekijken. Laten we eerst een eigenschap choice maken, die we gaan binden aan een groep radio:

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

Laten we nu een groep radio maken:

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

Laten we elke voorzien van de directive v-model en deze binden aan de eigenschap 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>

Laten we ze elk ook een eigen value geven:

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>

Nu zal in de eigenschap choice altijd de value van de geselecteerde radio liggen:

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