Darbas su radio Vue

Darbas su radio vyksta panašiu būdu. Pažiūrėkime praktiškai. Pirmiausia sukurkime savybę choice, kurią mes pririšime prie radio grupės:

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

Dabar sukurkime radio grupę:

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

Kiekvienam iš jų parašykime direktyvą v-model ir pririškime prie jos savybę 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>

Taip pat suteikkime kiekvienam iš jų savo 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>

Dabar savybėje choice visada bus value pažymėto radio:

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