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

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

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

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

<template>
	<input name="radio" type="radio">
	<input name="radio" type="radio">
	<input name="radio" type="radio">
</template>

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

<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 လည်း ပေးကြပါစို့။

<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 ရှိနေမည် ဖြစ်သည်။

<template>
	you choosed: {{ choice }}
</template>

radio အစုတစ်ခုကို အသုံးပြု၍ မည်သည့်ဘာသာစကားသည် အသုံးပြုသူ၏ မိခင်ဘာသာစကား ဖြစ်သည်ကို မေးမြန်းပါ။ ရွေးချယ်ထားသော ဘာသာစကားကို စာပိုဒ်တစ်ခုအတွင်း ပြသရန် ပြုလုပ်ပါ။

အထက်ပါ တာဝန်ကို အောက်ပါအတိုင်း ပြုပြင်မွမ်းမံပါ။ ကွဲပြားသော ဘာသာစကားများဖြင့် ရေးသားထားသည့် စာပိုဒ်သုံးပိုဒ် ရှိသည်ဟု ထားကြပါစို့။ အသုံးပြုသူ၏ ရွေးချယ်မှုပေါ်မူတည်၍ သူ ရွေးချယ်ထားသော ဘာသာစကားဖြင့် စကားစုကို ပြသပါ။