Trabalhando com radio no Vue

Trabalhar com radio ocorre de maneira análoga. Vamos ver na prática. Para começar, vamos fazer uma propriedade choice, que vamos vincular a um grupo de radio:

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

Vamos fazer agora um grupo de radio:

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

Vamos escrever para cada um deles a diretiva v-model e vincular a eles a propriedade 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>

Vamos dar também a cada um deles seu próprio 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>

Agora na propriedade choice sempre estarará o value do radio marcado:

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