Massiivi objektide redigeerimisvorm Vue's

Nüüd rakendame massiivi objektide elementide redigeerimise. Teeme selleks nupu, millele vajutades kuvatakse loendi elemendi juures redigeerimisvorm. Pärast vormi täitmist vajutame salvestusnupule ja muudatused salvestatakse massiivi, vorm eemaldatakse.

Asume rakendamise juurde. Massiivi objektidele peame iga objekti jaoks lisama veel ühe välja, mis sisaldab kasutaja olekut, kuvamist või redigeerimist:

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

Kuvame massiivi sisu loendina:

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

Nüüd eraldame kuvamisrežiimi ja redigeerimisrežiimi:

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

Rakendame meetodid:

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

Modifitseerige eelmise õppetunni ülesannet nii, et ilmub veerg linkidega iga töötaja redigeerimiseks.