Vue တွင် radio နှင့် အလုပ်လုပ်ခြင်း

radio များနှင့် အလုပ်လုပ်ခြင်းသည် အလားတူနည်းလမ်းအတိုင်း ဖြစ်ပါသည်။ လက်တွေ့တွင် ကြည့်ရအောင်။ ပထမဆုံး choice ဆိုသည့် property တစ်ခုကို ဖန်တီးကြပါစို့။ ထို property ကို radio အစုတစ်ခုနှင့် ချိတ်ဆက်မည် ဖြစ်သည်။

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

ယခု radio အစုတစ်ခုကို ဖန်တီးကြပါစို့။

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

တစ်ခုစီကို v-model directive ရေးပြီး ၎င်းကို choice property နှင့် ချိတ်ဆက်ကြပါစို့။

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 property ထဲတွင် အမြဲတမ်း ရွေးထားသော radio ၏ value ရှိနေမည် ဖြစ်သည်။

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