Práca s radio vo Vue

Práca s radio prebieha podobným spôsobom. Pozrime sa na to v praxi. Na začiatok vytvorme vlastnosť choice, ktorú budeme viazať na skupinu radio:

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

Teraz vytvorme skupinu radio:

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

Každému z nich napíšme direktívu v-model a viažme naň vlastnosť 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>

Dajme tiež každému z nich svoj 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>

Teraz vo vlastnosti choice bude vždy hodnota value označeného radio:

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