Форма за уредување на низа од објекти во Vue

Ајде сега да ја имплементираме можноста за уредување на елементите од низата од објекти. Ќе направиме копче, при кликнување на кое во ставката од листата ќе се појави форма за уредување. По пополнувањето на формата ќе кликнеме на копчето за зачувување и промените ќе бидат зачувани во низата, а формата ќе исчезне.

Да почнеме со имплементацијата. Во низата од објекти на секој објект мора да додадеме уште едно поле, кое содржи состојба на корисникот, приказ или уредување:

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

Модифицирајте ја задачата од претходната лекција така што ќе се додаде колона со линкови за уредување на секој вработен.