Vorm vir die redigering van 'n array van objekte in Vue

Laat ons nou die redigering van elemente van 'n array van objekte implementeer. Ons sal 'n knoppie maak, waarop geklik word om 'n redigeringsvorm in die lysitem te laat verskyn. Nadat die vorm ingevul is, sal ons op die stoorknoppie klik en die veranderinge sal in die array gestoor word, en die vorm sal verdwyn.

Kom ons begin met die implementering. Aan elke objek in die array van objekte moet ons nog 'n veld byvoeg, wat die toestand van die gebruiker aandui, vertoon of redigering:

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

Laat ons die inhoud van die array as 'n lys vertoon:

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

Laat ons nou die vertoonmodus en die redigeringsmodus skei:

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

Laat ons die metodes implementeer:

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

Wysig die taak van die vorige les sodat 'n kolom met skakels verskyn vir die redigering van elke werknemer.