Συστατικό για Προσθήκη Δεδομένων στο Vue

Ας υλοποιήσουμε τώρα μια φόρμα για την προσθήκη νέων χρηστών. Αυτή τη φόρμα θα την φτιάξουμε σε μορφή ξεχωριστού συστατικού. Ας ξεκινήσουμε την υλοποίηση. Αρχικά, στο γονικό συστατικό θα φτιάξουμε μια μέθοδο για προσθήκη χρήστη:

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

Στην προβολή του γονικού συστατικού θα συνδέσουμε το θυγατρικό:

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

Στο θυγατρικό συστατικό θα φτιάξουμε ιδιότητες για τον έλεγχο των εισροών:

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

Στο θυγατρικό συστατικό θα φτιάξουμε μια μέθοδο για αποθήκευση δεδομένων:

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

Ας φτιάξουμε τις προβολές του θυγατρικού συστατικού:

<template>
	<input v-model="newName">
	<input v-model="newSurn">
	
	<button @click="save">
		αποθήκευση
	</button>
</template>

Υλοποιήστε μια φόρμα για προσθήκη νέου εργαζομένου.