Αντίδραση στην Επεξεργασία Δεδομένων του Component στο Vue

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

methods: {
	change(id, name, surn) {
		this.users = this.users.map((user) => {
			if (user.id === id) {
				user.name = name;
				user.surn = surn;
			}
			return user;
		});
	}
}

Ας δημιουργήσουμε components σε βρόχο, περνώντας τους ως παράμετρο το όνομα, το επώνυμό, το id και τη μέθοδο για αλλαγή:

<template>
	<User
		v-for   ="user in users"
		
		:id     ="user.id"
		:name   ="user.name"
		:surn   ="user.surn"
		:key    ="user.id"
		@change="change"
	/>
</template>

Ας ορίσουμε το εκπεμπόμενο συμβάν στις ρυθμίσεις emits του θυγατρικού component:

props: {
	id:     Number,
	name:   String,
	surn:   String,
},
emits: ['change'],

Τώρα στο θυγατρικό component ας φτιάξουμε μια ιδιότητα, που θα ορίζει τη λειτουργία του component, προβολή ή επεξεργασία:

data() {
	return {
		isEdit: false,
	}
}

Ας φτιάξουμε επίσης ιδιότητες για την υποστήριξη λειτουργίας των πεδίων εισόδου για επεξεργασία:

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

Ας φτιάξουμε τα αρχικά values αυτών των ιδιοτήτων να προέρχονται από τα props:

data() {
	return {
		isEdit: false,
		newName: this.name,
		newSurn: this.surn,
	}
}

Ας φτιάξουμε μια μέθοδο, που θα ενεργοποιεί τη λειτουργία επεξεργασίας:

methods: {
	edit() {
		this.isEdit = true;
	}
}

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

methods: {
	save() {
		this.isEdit = false;
		this.$emit('change', this.id, this.newName, this.newSurn);
	}
}

Ας φτιάξουμε την προβολή του θυγατρικού component:

<template>
	<template v-if="!isEdit">
		{{ name }}
		{{ surn }}
		<button @click="edit">
			edit
		</button>
	</template>
	<template v-else>
		<input v-model="newName">
		<input v-model="newSurn">
		<button @click="save">
			save
		</button>
	</template>
</template>

Υλοποιήστε την επεξεργασία δεδομένων του component Employee.