Componente per l'aggiunta di dati in Vue

Ora implementiamo un modulo per aggiungere nuovi utenti. Faremo questo modulo sotto forma di un componente separato. Iniziamo l'implementazione. Per cominciare, nel componente genitore creiamo un metodo per aggiungere un utente:

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

Nel template del componente genitore includiamo quello figlio:

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

Nel componente figlio creiamo delle proprietà per controllare gli input:

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

Nel componente figlio creiamo un metodo per salvare i dati:

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

Creiamo il template del componente figlio:

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

Implementa un modulo per aggiungere un nuovo dipendente.