რადიო ღილაკებთან მუშაობა Vue-ში

რადიო ღილაკებთან მუშაობა ხდება ანალოგიურად. მოდით პრაქტიკაში ვნახოთ. ჯერ შევქმნათ თვისება choice, რომელსაც დავაკავშირებთ რადიო ღილაკების ჯგუფთან:

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

ახლა შევქმნათ რადიო ღილაკების ჯგუფი:

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

თითოეულ მათგანს დავუწეროთ დირექტივა v-model და დავაკავშიროთ ის თვისებასთან 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>

მივცეთ თითოეულ მათგანს საკუთარი 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>

ახლა თვისებაში choice ყოველთვის იქნება მონიშნული რადიო ღილაკის value:

App.vue<template>
  თქვენ აირჩიეთ: {{ choice }}
</template>