Penyingkiran Komponen Reaktif dalam Vue

Mari belajar cara menyingkirkan komponen anak secara reaktif dari senarai. Untuk melakukan ini, buatkan butang khas dalam setiap komponen anak. Apabila butang ini ditekan, suatu peristiwa akan dipancarkan dan komponen induk akan menyingkirkan komponen anak yang ditentukan mengikut id-nya.

Mari kita mulakan pelaksanaannya. Katakan dalam komponen induk terdapat tatasusunan objek berikut:

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

Tuliskan kaedah dalam komponen induk untuk membuang pengguna mengikut id-nya:

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

Buat komponen dalam gelung, dengan menghantar nama, nama keluarga, id dan kaedah untuk penyingkiran sebagai parameter:

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

Tetapkan data masuk dalam tetapan props dan peristiwa yang dipancarkan dalam tetapan emits:

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

Paparkan nama dan nama keluarga pengguna dalam persembahan komponen:

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

Sekarang mari buat butang, yang apabila ditekan akan memancarkan peristiwa untuk penyingkiran. id komponen akan dihantar sebagai parameter peristiwa ini. Komponen induk, upon receiving the event, akan membuang pengguna ini dari tatasusunan objek dan ia akan hilang secara reaktif dari senarai pengguna.

Jadi, mari laksanakan butang ini:

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

Paparkan komponen Employee dalam gelung. Buatkan butang dalam setiap komponen untuk menyingkirkannya.