Reaktiewe Verwydering van Komponente in Vue

Kom ons leer hoe om kinder-komponente reaktief uit 'n lys te verwyder. Laat ons vir hierdie doel 'n spesiale knoppie in elke kinder-komponent maak. Met 'n klik op hierdie knoppie sal 'n gebeurtenis uitgestuur word en in die ouerkomponent sal die gespesifiseerde kinder-komponent volgens sy id verwyder word.

Kom ons begin met die implementering. Laat die ouerkomponent die volgende array van voorwerpe hê:

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

Laat ons 'n metode in die ouerkomponent skryf om 'n gebruiker volgens sy id te verwyder:

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

Laat ons komponente in 'n lus skep, deur aan hulle die naam, van, id en die metode vir verwydering as parameters deur te gee:

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

Definieer die inkomende data in die props-instelling en die uitgestuurde gebeurtenis in die emits-instelling:

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

Laat ons die naam en van van die gebruiker in die komponent se templaat uitvoer:

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

En nou, laat ons 'n knoppie maak wat, wanneer dit gedruk word, 'n gebeurtenis vir verwydering sal uitstuur. Die id van die komponent sal as parameter van hierdie gebeurtenis gestuur word. Wanneer die ouerkomponent die gebeurtenis ontvang, sal hy hierdie gebruiker uit die array van voorwerpe verwyder en hy sal reaktief uit die lys gebruikers verdwyn.

So, laat ons hierdie knoppie implementeer:

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

Voer die Employee-komponente in 'n lus uit. Maak in elke komponent 'n knoppie om dit te verwyder.