Working with radio in Vue

Working with radio is similar. Let's see in practice. First, let's create a property choice, which we will bind to the group radio:

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

Let's now make a group radio:

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

Let's write a v-model directive for each of them and bind the choice property to it:

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>

Let's also give each of them its own 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>

Now the choice property will always contain value of the marked radio:

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