Form untuk Mengedit Array Objek di Vue

Sekarang mari kita implementasikan pengeditan elemen array objek. Mari kita buat untuk ini sebuah tombol, yang ketika ditekan pada item daftar akan memunculkan form untuk mengedit. Setelah mengisi form, kita akan menekan tombol simpan dan perubahan akan disimpan dalam array, dan form akan disembunyikan.

Mari kita mulai implementasinya. Dalam array objek, untuk setiap objek kita harus menambahkan satu field lagi, yang berisi status pengguna, tampil atau edit:

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

Tampilkan isi array dalam bentuk daftar:

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

Sekarang pisahkan mode tampil dan mode edit:

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

Implementasikan method:

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

Modifikasi tugas dari pelajaran sebelumnya sehingga muncul kolom dengan tautan untuk mengedit setiap pekerja.