Vue-এ রেডিওর সাথে কাজ

রেডিও এর সাথে কাজ একইভাবে করা হয়। আসুন অনুশীলনে দেখি। প্রথমে একটি choice বৈশিষ্ট্য তৈরি করি, যা আমরা radio গ্রুপের সাথে বাঁধব:

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

এখন একটি radio গ্রুপ তৈরি করি:

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

প্রতিটিতে v-model ডাইরেকটিভ লিখি এবং এটিকে choice বৈশিষ্ট্যের সাথে বাঁধি:

<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 বৈশিষ্ট্যে সর্বদা চিহ্নিত radio এর value থাকবে:

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

radio গ্রুপ ব্যবহার করে ব্যবহারকারীর কাছ থেকে জিজ্ঞাসা করুন যে কোন ভাষাটি তার মাতৃভাষা। নির্বাচিত ভাষাটি একটি অনুচ্ছেদে প্রদর্শিত হয় তা নিশ্চিত করুন

পূর্ববর্তী কাজটি নিম্নরূপ পরিবর্তন করুন: আমাদের কাছে বিভিন্ন ভাষায় লেখা তিনটি অনুচ্ছেদ আছে। ব্যবহারকারীর পছন্দের উপর নির্ভর করে তিনি যে ভাষা নির্বাচন করেছেন সেই ভাষায় বাক্যাংশটি প্রদর্শন করুন।