Xóa các thành phần một cách phản ứng trong Vue

Hãy học cách xóa các thành phần con từ danh sách một cách phản ứng. Để làm điều này, hãy tạo một nút đặc biệt trong mỗi thành phần con. Khi nhấp vào nút này, một sự kiện sẽ được phát ra và trong thành phần cha, thành phần con được chỉ định sẽ bị xóa theo id của nó.

Hãy bắt đầu triển khai. Giả sử trong thành phần cha có mảng đối tượng sau:

data() {
	return {
		users: [
			{
				id: 1,
				name: 'name1',
				surn: 'surn1'
			},
			{
				id: 2,
				name: 'name2',
				surn: 'surn2'
			},
			{
				id: 3,
				name: 'name3',
				surn: 'surn3'
			},
		],
	}
}

Hãy viết một phương thức trong thành phần cha để xóa người dùng theo id của họ:

methods: {
	remove(id) {
		this.users = this.users.filter((user) => {
			return user.id !== id;
		})
	}
}

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

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

Khai báo dữ liệu đầu vào trong cấu hình props và sự kiện được phát ra trong cấu hình emits:

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

Hiển thị trong giao diện của thành phần tên và họ của người dùng:

<template>
	{{ name }}
	{{ surn }}
</template>

Và bây giờ hãy tạo một nút, khi nhấp vào sẽ phát ra sự kiện để xóa. Tham số của sự kiện này sẽ là id của thành phần. Thành phần cha khi nhận được sự kiện sẽ xóa người dùng này khỏi mảng đối tượng và họ sẽ biến mất một cách phản ứng khỏi danh sách người dùng.

Vậy, hãy triển khai nút này:

<template>
	{{ name }}
	{{ surn }}
	
	<button @click="$emit('remove', id)">
		remove
	</button>
</template>

Hiển thị các thành phần Employee trong vòng lặp. Tạo một nút trong mỗi thành phần để xóa nó.