Raadioknuppide töötamine Vue's

Töötamine raadioknuppudega toimub sarnasel viisil. Vaatame seda praktikas. Alustuseks teome omaduse choice, mille seome raadioknuppude grupiga:

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

Teeme nüüd raadioknuppude grupi:

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

Kirjutame igale neist direktiivi v-model ja seome selle omadusega 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>

Anname igale neist ka oma 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>

Nüüd on omaduses choice alati value märgitud raadioknopist:

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