Komponent til tilføjelse af data i Vue

Lad os nu implementere en formular til at tilføje nye brugere. Vi laver denne formular som en separat komponent. Lad os gå i gang med implementeringen. Til at starte med, lav en metode i den forældre komponent til at tilføje en bruger:

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

I den forældre komponents præsentation, tilslutter vi den underordnede komponent:

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

I den underordnede komponent laver vi egenskaber til at kontrollere inputfelterne:

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

I den underordnede komponent laver vi en metode til at gemme data:

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

Lad os lave den underordnede komponents præsentation:

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

Implementer en formular til at tilføje en ny medarbejder.