Formulario para editar un array de objetos en Vue

Ahora implementemos la edición de elementos del array de objetos. Creemos para ello un botón, al hacer clic en el cual aparecerá un formulario de edición en el elemento de la lista. Después de llenar el formulario haremos clic en el botón de guardar y los cambios se guardarán en el array, y el formulario desaparecerá.

Procedamos con la implementación. En el array de objetos, a cada objeto debemos agregar un campo más, que contenga el estado del usuario: mostrar o editar:

data() {
	return {
		users: [
			{
				id: 1,
				name: 'name1',
				surn: 'surn1',
				isEdit: false,
			},
			{
				id: 2,
				name: 'name2',
				surn: 'surn2',
				isEdit: false,
			},
			{
				id: 3,
				name: 'name3',
				surn: 'surn3',
				isEdit: false,
			},
		]
	}
}

Mostremos el contenido del array en forma de lista:

<template>
	<ul>
		<li v-for="user in users" :key="user.id">
			{{ user.name }}
			{{ user.surn }}
		</li>
	</ul>
</template>

Ahora separamos el modo de visualización y el modo de edición:

<template>
	<ul>
		<li v-for="user in users" :key="user.id">
			<template v-if="!user.isEdit">
				{{ user.name }}
				{{ user.surn }}
				<button @click="edit(user)">
					editar
				</button>
			</template>
			<template v-else>
				<input v-model="user.name">
				<input v-model="user.surn">
				<button @click="save(user)">
					guardar
				</button>
			</template>
		</li>
	</ul>
</template>

Implementemos los métodos:

methods: {
	edit(user) {
		user.isEdit = true;
	},
	save(user) {
		user.isEdit = false;
	},
}

Modifique la tarea de la lección anterior para que aparezca una columna con enlaces para editar cada trabajador.