Édition réactive des données du composant dans Vue

Implémentons maintenant l'édition des données de nos composants enfants. Pour commencer, dans le composant parent, créons une méthode pour modifier l'utilisateur par son id :

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

Créons les composants dans une boucle, en leur passant en paramètre le prénom, le nom, le id et la méthode de modification :

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

Déclarons l'événement émis dans la configuration emits du composant enfant :

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

Maintenant, dans le composant enfant, créons une propriété qui définira le mode du composant, affichage ou édition :

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

Créons également des propriétés pour prendre en charge le fonctionnement des champs de saisie pour l'édition :

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

Faisons en sorte que les valeurs initiales de ces propriétés proviennent des props :

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

Créons une méthode qui activera le mode édition :

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

Créons une méthode qui sauvegardera les données modifiées en désactivant le mode édition :

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

Créons le template du composant enfant :

<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>

Implémentez l'édition des données du composant Employee.