Vue-da Obyektler Massivinin Redakte Forması

Gəlin indi massivdəki obyekt elementlerini redakte etməni həyata keçirək. Bunun üçün siyahı elementində basdıqda redakte formasının görünəcəyi bir düymə edək. Formanı doldurduqdan sonra saxlama düyməsini basacayıq və dəyişikliklər massivdə saxlanılacaq, forma isə gizlədiləcək.

Həyata keçirməyə başlayaq. Obyektler massivində hər bir obyektə biz istifadəçi vəziyyətini, yəni göstərmə və ya redakte etmə vəziyyətini əks etdirən başqa bir sahə əlavə etməliyik:

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

Massivin məzmununu siyahı şəklində çıxaraq:

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

İndi göstərmə rejimini və redakte rejimini ayıraq:

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

Metodları həyata keçirək:

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

Əvvəlki dərsin tapşırığını elə dəyişdirin ki, hər bir işçini redakte etmək üçün keçidlər olan bir sütun əmələ gəlsin.