Borang untuk Mengedit Array Objek dalam Vue

Sekarang mari kita laksanakan pengeditan elemen array objek. Kami akan membuat satu butang untuk ini; apabila diklik, borang untuk mengedit akan muncul dalam item senarai. Selepas mengisi borang, kami akan klik butang simpan dan perubahan akan disimpan dalam array, dan borang akan disingkirkan.

Mari kita mulakan pelaksanaan. Untuk setiap objek dalam array objek, kita perlu menambah satu lagi medan, yang mengandungi keadaan pengguna, paparan atau pengeditan:

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

Mari keluarkan kandungan array dalam bentuk senarai:

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

Sekarang mari bezakan mod paparan dan mod pengeditan:

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

Mari laksanakan kaedah:

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

Ubah suai tugas dari pelajaran sebelumnya supaya muncul lajur dengan pautan untuk mengedit setiap pekerja.