การทำงานกับ radio ใน Vue

การทำงานกับ radio เกิดขึ้นในลักษณะที่คล้ายกัน ลองมาดู ในทางปฏิบัติกัน ก่อนอื่นเรามาสร้างคุณสมบัติ choice ขึ้นมา ซึ่งเราจะทำการผูก กับกลุ่ม radio:

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

ตอนนี้เรามาสร้างกลุ่ม radio กัน:

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

มาเขียน directive 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 จะมี value ของ radio ที่ถูกเลือกอยู่เสมอ:

<template>
	คุณเลือก: {{ choice }}
</template>

ถามผู้ใช้ด้วยกลุ่ม radio ว่าภาษาใดคือภาษาแม่ของเขา จัดการให้ ภาษาที่เลือกแสดงออกมาในย่อหน้า

ปรับแต่งโจทย์ก่อนหน้าดังนี้ ให้เรามีสามย่อหน้า พร้อมข้อความในภาษาต่างกัน ขึ้นอยู่ กับทางเลือกของผู้ใช้ให้แสดงวลี ในภาษาที่เขาเลือก