คอมโพเนนต์สำหรับเพิ่มข้อมูลใน Vue

ตอนนี้เรามาลองเขียนฟอร์ม สำหรับเพิ่มผู้ใช้ใหม่กัน เราจะสร้างฟอร์มนี้ในรูปแบบของ คอมโพเนนต์แยกต่างหาก มาเริ่มลงมือทำกัน เริ่มต้นด้วยการสร้างเมธอดสำหรับเพิ่ม ผู้ใช้ในคอมโพเนนต์หลัก:

methods: {
	add(name, surn) {
		let id = this.users.length + 1;
		
		this.users.push({
			id,
			name,
			surn
		});
	}
}

ในเทมเพลตของคอมโพเนนต์หลัก ให้เชื่อมต่อกับคอมโพเนนต์ย่อย:

<template>
	<UserForm @add="add" />
</template>

ในคอมโพเนนต์ย่อย ให้สร้าง พร็อปเพอร์ตี้สำหรับควบคุมอินพุต:

data() {
	return {
		newName: '',
		newSurn: '',
	}
}

ในคอมโพเนนต์ย่อย ให้สร้าง เมธอดสำหรับบันทึกข้อมูล:

methods: {
	save() {
		this.$emit('add', this.newName, this.newSurn);
	}
}

สร้างเทมเพลตของคอมโพเนนต์ย่อย:

<template>
	<input v-model="newName">
	<input v-model="newSurn">
	
	<button @click="save">
		save
	</button>
</template>

ให้เขียนฟอร์มสำหรับเพิ่ม พนักงานใหม่