Component voor het toevoegen van gegevens in Vue

Laten we nu een formulier implementeren voor het toevoegen van nieuwe gebruikers. We maken dit formulier als een afzonderlijk component. Laten we beginnen met de implementatie. Laten we eerst in het bovenliggende component een methode maken voor het toevoegen van een gebruiker:

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

In de weergave van het bovenliggende component includeren we het onderliggende component:

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

In het onderliggende component maken we eigenschappen voor het beheren van inputs:

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

In het onderliggende component maken we een methode voor het opslaan van gegevens:

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

Laten we de weergaven van het onderliggende component maken:

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

Implementeer een formulier voor het toevoegen van een nieuwe werknemer.