Penghapusan Komponen Reaktif di Vue

Mari belajar menghapus komponen anak secara reaktif dari sebuah daftar. Untuk melakukannya, buatlah tombol khusus di setiap komponen anak. Ketika tombol ini ditekan, sebuah event akan dipancarkan dan komponen induk akan menghapus komponen anak yang ditentukan berdasarkan id-nya.

Mari kita mulai implementasinya. Misalkan dalam komponen induk terdapat array objek berikut:

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

Tuliskan metode di komponen induk untuk menghapus pengguna berdasarkan id-nya:

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

Buat komponen dalam loop, berikan nama, nama belakang, id, dan metode untuk menghapus sebagai parameter:

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

Tentukan data yang masuk dalam pengaturan props dan event yang dipancarkan dalam pengaturan emits:

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

Tampilkan nama dan nama belakang pengguna dalam template komponen:

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

Sekarang buat tombol yang, ketika ditekan, akan memancarkan event untuk penghapusan. id komponen akan diteruskan sebagai parameter event ini. Saat menerima event, komponen induk akan menghapus pengguna ini dari array objek dan ia akan hilang secara reaktif dari daftar pengguna.

Jadi, mari implementasikan tombol ini:

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

Tampilkan komponen Employee dalam loop. Buat tombol di setiap komponen untuk menghapusnya.