Chỉnh sửa dữ liệu component một cách phản ứng trong Vue

Bây giờ hãy thực hiện việc chỉnh sửa dữ liệu của các component con của chúng ta. Đầu tiên, trong component cha, hãy tạo một phương thức để thay đổi người dùng theo id của họ:

methods: {
	change(id, name, surn) {
		this.users = this.users.map((user) => {
			if (user.id === id) {
				user.name = name;
				user.surn = surn;
			}
			return user;
		});
	}
}

Hãy tạo các component trong vòng lặp, truyền cho chúng tham số tên, họ, id và phương thức để thay đổi:

<template>
	<User
		v-for   ="user in users"
		
		:id     ="user.id"
		:name   ="user.name"
		:surn   ="user.surn"
		:key    ="user.id"
		@change="change"
	/>
</template>

Hãy khai báo sự kiện được phát ra trong cấu hình emits của component con:

props: {
	id:     Number,
	name:   String,
	surn:   String,
},
emits: ['change'],

Bây giờ trong component con, hãy tạo một thuộc tính sẽ thiết lập chế độ của component, hiển thị hoặc chỉnh sửa:

data() {
	return {
		isEdit: false,
	}
}

Hãy cũng tạo các thuộc tính để hỗ trợ hoạt động của các ô nhập liệu cho việc chỉnh sửa:

data() {
	return {
		isEdit: false,
		newName: '',
		newSurn: '',
	}
}

Hãy đảm bảo rằng các giá trị ban đầu của các thuộc tính này được lấy từ props:

data() {
	return {
		isEdit: false,
		newName: this.name,
		newSurn: this.surn,
	}
}

Hãy tạo một phương thức sẽ kích hoạt chế độ chỉnh sửa:

methods: {
	edit() {
		this.isEdit = true;
	}
}

Hãy tạo một phương thức sẽ lưu dữ liệu đã chỉnh sửa, đồng thời tắt chế độ chỉnh sửa:

methods: {
	save() {
		this.isEdit = false;
		this.$emit('change', this.id, this.newName, this.newSurn);
	}
}

Hãy tạo giao diện cho component con:

<template>
	<template v-if="!isEdit">
		{{ name }}
		{{ surn }}
		<button @click="edit">
			chỉnh sửa
		</button>
	</template>
	<template v-else>
		<input v-model="newName">
		<input v-model="newSurn">
		<button @click="save">
			lưu
		</button>
	</template>
</template>

Hãy thực hiện việc chỉnh sửa dữ liệu của component Employee.