Vue-da radio bilan ishlash

Radio bilan ishlash ham xuddi shunday tarzda amalga oshiriladi. Keling, amaliyotda ko'rib chiqaylik. Boshlanish uchun, biz guruhga bog'laydigan choice xususiyatini yaratamiz radio:

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

Keling, endi radio guruhini yaratamiz:

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

Keling, ularning har biriga v-model direktivasini yozamiz va unga choice xususiyatini bog'laymiz:

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>

Keling, ularning har biriga o'zining value qiymatini beraylik:

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>

Endi choice xususiyatida har doim belgilangan radioning value qiymati bo'ladi:

App.vue<template>
  Siz tanladingiz: {{ choice }}
</template>