Komponent om Data in Vue By te Voeg

Laat ons nou die vorm implementeer om nuwe gebruikers by te voeg. Ons sal hierdie vorm as 'n aparte komponent maak. Kom ons begin met die implementering. Eerstens, laat ons 'n metode skep in die ouer komponent om 'n gebruiker by te voeg:

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

In die ouer komponent se templaat, laat ons die kindkomponent insluit:

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

In die kindkomponent, laat ons eienskappe skep om die invoervelde te beheer:

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

In die kindkomponent, laat ons 'n metode skep om die data te stoor:

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

Laat ons die kindkomponent se templaat maak:

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

Implementeer 'n vorm om 'n nuwe werknemer by te voeg.