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

การทำงานกับ select จะคล้ายคลึงกัน - เพิ่มแอตทริบิวต์ v-model ไปที่แท็ก โดยจะผูกกับคุณสมบัติ ของออบเจ็กต์ data ข้อความของแท็ก option ที่ถูกเลือก จะถูกเก็บไว้ในคุณสมบัตินี้

โค้ดต่อไปนี้สาธิตตัวอย่าง การทำงานของรายการเลือกแบบหล่นลง:

data() {
	return {
		selected: 'value1', // ค่าเริ่มต้น
	}
}

<template>
	<select v-model="selected">
		<option>value1</option>
		<option>value2</option>
		<option>value3</option>
	</select>
	
	<p>{{ selected }}</p>
</template>

ถามผู้ใช้ด้วย select ว่าเขาอาศัยอยู่ในเมืองใด ทำให้ เมืองที่เลือกแสดงผลในย่อหน้า