A radio gombok kezelése Vue-ban

A radio gombok kezelése hasonló módon történik. Nézzük meg a gyakorlatban. Először hozzunk létre egy choice tulajdonságot, amelyet egy radio csoporthoz fogunk kötni:

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

Most készítsünk egy radio csoportot:

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

Írjunk mindegyikre egy v-model direktívát és kössük hozzá a choice tulajdonságot:

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>

Adjunk mindegyiknek saját value értéket:

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>

Most a choice tulajdonságban mindig a kiválasztott radio value értéke lesz:

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