Thành phần để thêm dữ liệu trong Vue

Bây giờ chúng ta hãy triển khai biểu mẫu để thêm người dùng mới. Chúng ta sẽ tạo biểu mẫu này dưới dạng một thành phần riêng biệt. Hãy bắt đầu thực hiện. Đầu tiên, trong thành phần cha, hãy tạo một phương thức để thêm người dùng:

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

Trong phần hiển thị của thành phần cha, hãy kết nối thành phần con:

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

Trong thành phần con, hãy tạo các thuộc tính để kiểm soát các đầu vào:

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

Trong thành phần con, hãy tạo một phương thức để lưu dữ liệu:

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

Hãy tạo phần hiển thị cho thành phần con:

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

Hãy triển khai biểu mẫu để thêm một nhân viên mới.