Formulier voor het bewerken van een array van objecten in Vue

Laten we nu het bewerken van elementen in een array van objecten implementeren. Laten we hiervoor een knop maken, waar bij het klikken op een lijstitem een formulier voor bewerking verschijnt. Na het invullen van het formulier klikken we op de knop voor opslaan en de wijzigingen worden opgeslagen in de array, en het formulier verdwijnt.

Laten we beginnen met de implementatie. In de array van objecten moeten we aan elk object nog een veld toevoegen, dat de status van de gebruiker bevat, weergave of bewerking:

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

Laten we de inhoud van de array weergeven als een lijst:

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

Laten we nu de weergavemodus en de bewerkmodus scheiden:

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

Laten we de methodes implementeren:

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

Wijzig de taak van de vorige les zodat er een kolom met links voor het bewerken van elke werknemer verschijnt.