Formulaire pour éditer un tableau d'objets dans Vue

Implémentons maintenant l'édition des éléments d'un tableau d'objets. Créons pour cela un bouton, en cliquant sur lequel un formulaire d'édition apparaîtra dans l'élément de la liste. Après avoir rempli le formulaire, nous cliquerons sur le bouton de sauvegarde et les modifications seront sauvegardées dans le tableau, et le formulaire disparaîtra.

Passons à l'implémentation. Dans le tableau d'objets, à chaque objet nous devons ajouter un autre champ, contenant l'état de l'utilisateur, affichage ou édition :

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,
			},
		]
	}
}

Affichons le contenu du tableau sous forme de liste :

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

Maintenant, séparons le mode affichage et le mode édition :

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

Implémentons les méthodes :

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

Modifiez la tâche de la leçon précédente afin qu'une colonne avec des liens pour éditer chaque employé apparaisse.