Edición Reactiva de Datos de Componentes en Vue

Ahora implementemos la edición de datos de nuestros componentes hijos. Para empezar, en el componente padre creemos un método para modificar el usuario por su id:

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

Creemos componentes en un bucle, pasándoles como parámetros el nombre, apellido, id y el método para modificar:

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

Registremos el evento emitido en la configuración emits del componente hijo:

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

Ahora en el componente hijo creemos una propiedad que establecerá el modo del componente, visualización o edición:

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

Creemos también propiedades para soportar el funcionamiento de los inputs de edición:

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

Hagamos que los valores iniciales de estas propiedades se tomen de las props:

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

Creemos un método que active el modo de edición:

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

Creemos un método que guarde los datos editados desactivando al mismo tiempo el modo de edición:

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

Creemos la vista del componente hijo:

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

Implemente la edición de datos del componente Employee.