Formular pentru editarea unui array de obiecte în Vue

Să implementăm acum editarea elementelor unui array de obiecte. Pentru aceasta, vom face un buton, la apăsarea căruia în elementul listei va apărea un formular pentru editare. După completarea formularului, vom apăsa butonul de salvare și modificările vor fi salvate în array, iar formularul va dispărea.

Să începem implementarea. În array-ul de obiecte, fiecărui obiect trebuie să-i adăugăm încă un câmp, care conține starea utilizatorului, afișarea sau editarea:

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

Să afișăm conținutul array-ului sub formă de listă:

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

Acum să separăm modul de afișare și modul de editare:

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

Să implementăm metodele:

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

Modificați problema din lecția precedentă astfel încât să apară o coloană cu link-uri pentru editarea fiecărui angajat.