Forma objektu masīva rediģēšanai Vue

Tagad realizēsim masīva objektu elementu rediģēšanu. Izveidosim tam pogu, uz kuras noklikšķinot saraksta punktā parādīsies rediģēšanas forma. Pēc formas aizpildīšanas mēs nospiedīsim uz saglabāšanas pogas un izmaiņas tiks saglabātas masīvā, un forma pazudīs.

Sāksim realizāciju. Objektu masīvā katram objektam mums jāpievieno vēl viens lauks, kas satur lietotāja stāvokli, rādīšanu vai rediģēšanu:

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

Parādīsim masīva saturu saraksta veidā:

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

Tagad atdalīsim rādīšanas režīmu un rediģēšanas režīmu:

<template>
	<ul>
		<li v-for="user in users" :key="user.id">
			<template v-if="!user.isEdit">
				{{ user.name }}
				{{ user.surn }}
				<button @click="edit(user)">
					rediģēt
				</button>
			</template>
			<template v-else>
				<input v-model="user.name">
				<input v-model="user.surn">
				<button @click="save(user)">
					saglabāt
				</button>
			</template>
		</li>
	</ul>
</template>

Realizēsim metodes:

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

Modificējiet iepriekšējās nodarbības uzdevumu tā, lai parādītos kolonna ar saitēm katra darbinieka rediģēšanai.