Form chỉnh sửa mảng đối tượng trong Vue

Bây giờ hãy triển khai chức năng chỉnh sửa các phần tử của mảng đối tượng. Để làm điều này, chúng ta sẽ tạo một nút, khi nhấp vào thì trong mục danh sách sẽ xuất hiện một form để chỉnh sửa. Sau khi điền vào form, chúng ta sẽ nhấn vào nút lưu và các thay đổi sẽ được lưu vào mảng, còn form thì sẽ bị ẩn đi.

Hãy bắt đầu triển khai. Trong mảng các đối tượng, với mỗi đối tượng chúng ta cần thêm một trường nữa, chứa trạng thái của người dùng, hiển thị hoặc chỉnh sửa:

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

Hãy xuất nội dung của mảng dưới dạng danh sách:

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

Bây giờ hãy phân tách chế độ hiển thị và chế độ chỉnh sửa:

<template>
	<ul>
		<li v-for="user in users" :key="user.id">
			<template v-if="!user.isEdit">
				{{ user.name }}
				{{ user.surn }}
				<button @click="edit(user)">
					chỉnh sửa
				</button>
			</template>
			<template v-else>
				<input v-model="user.name">
				<input v-model="user.surn">
				<button @click="save(user)">
					lưu
				</button>
			</template>
		</li>
	</ul>
</template>

Hãy triển khai các phương thức:

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

Hãy sửa đổi bài tập của bài học trước để xuất hiện một cột chứa các liên kết để chỉnh sửa từng nhân viên.