Работа с radio в Vue

Работа с radio происходит аналогичным образом. Давайте посмотрим на практике. Для начала сделаем свойство choice, которое мы будем привязывать к группе radio:

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 всегда будет лежать value отмеченного radio:

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