Práce s radio ve Vue

Práce s radio probíhá podobným způsobem. Podívejme se na praxi. Pro začátek vytvoříme vlastnost choice, kterou budeme vázat ke skupině radio:

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

Nyní vytvořme 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íšeme direktivu v-model a připojíme k ní vlastnost 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>

Dejme také každému z nich vlastní 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>

Nyní ve vlastnosti choice bude vždy ležet value označeného radio:

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