Formular zur Bearbeitung eines Arrays von Objekten in Vue

Lassen Sie uns nun die Bearbeitung von Elementen eines Objektarrays implementieren. Erstellen wir dafüreinen Button, bei dessen Klick im Listeneintrag ein Formular zur Bearbeitung erscheint. Nach dem Ausfüllen des Formulars klicken wir auf den Button zum Speichern und die Änderungen werden im Array gespeichert, und das Formular wird ausgeblendet.

Beginnen wir mit der Implementierung. Im Array von Objekten müssen wir jedem Objekt ein weiteres Feld hinzufügen, das den Zustand des Benutzers enthält, Anzeige oder Bearbeitung:

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

Lassen Sie uns den Inhalt des Arrays in Form einer Liste ausgeben:

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

Lassen Sie uns nun den Anzeigemodus und den Bearbeitungsmodus trennen:

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

Implementieren wir die Methoden:

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

Modifizieren Sie die Aufgabe der vorherigen Lektion so, dass eine Spalte mit Links zur Bearbeitung jedes Mitarbeiters erscheint.