Vue'da Nesne Dizilerini Düzenlemek için Form

Şimdi bir nesne dizisinin elemanlarını düzenlemeyi uygulayalım. Bunun için, liste öğesine tıklandığında düzenleme formunun görüneceği bir buton yapalım. Formu doldurduktan sonra kaydet butonuna basacağız ve değişiklikler dizide kaydedilecek, form ise kalkacak.

Uygulamaya başlayalım. Nesne dizisinde her bir nesneye kullanıcının durumunu, gösterim veya düzenleme modunu içeren bir alan daha eklemeliyiz:

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

Dizinin içeriğini bir liste şeklinde gösterelim:

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

Şimdi gösterim modu ve düzenleme modunu ayıralım:

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

Metotları uygulayalım:

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

Önceki dersin görevini, her bir çalışanı düzenlemek için bağlantıların olduğu bir sütunun ortaya çıkması için değiştirin.