Φόρμα για επεξεργασία πίνακα αντικειμένων στο Vue

Ας υλοποιήσουμε τώρα την επεξεργασία στοιχείων πίνακα αντικειμένων. Θα φτιάξουμε για αυτό ένα κουμπί, upon pressing which στο στοιχείο της λίστας θα εμφανίζεται μια φόρμα για επεξεργασία. Μετά τη συμπλήρωση της φόρμας θα πατάμε στο κουμπί αποθήκευσης και οι αλλαγές θα αποθηκεύονται στον πίνακα, και η φόρμα θα αφαιρείται.

Ας προχωρήσουμε στην υλοποίηση. Στον πίνακα αντικειμένων για κάθε αντικείμενο πρέπει να προσθέσουμε ένα ακόμη πεδίο, που να περιέχει την κατάσταση του χρήστη, εμφάνιση ή επεξεργασία:

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

Ας εμφανίσουμε τα περιεχόμενα του πίνακα σε μορφή λίστας:

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

Τώρα ας διαχωρίσουμε τη λειτουργία εμφάνισης και τη λειτουργία επεξεργασίας:

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

Ας υλοποιήσουμε τις μεθόδους:

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

Τροποποιήστε την εργασία του προηγούμενου μαθήματος έτσι ώστε να εμφανίζεται μια στήλη με συνδέσμους για την επεξεργασία κάθε εργαζομένου.