Работа с 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>