Komponen untuk Menambah Data dalam Vue

Sekarang mari kita laksanakan borang untuk menambah pengguna baharu. Kami akan menjadikan borang ini sebagai komponen berasingan. Mari kita mulakan pelaksanaannya. Pertama, dalam komponen induk, buat kaedah untuk menambah pengguna:

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

Dalam persembahan komponen induk, sambungkan komponen anak:

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

Dalam komponen anak, buat sifat untuk mengawal input:

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

Dalam komponen anak, buat kaedah untuk menyimpan data:

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

Buat persembahan untuk komponen anak:

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

Laksanakan borang untuk menambah pekerja baharu.