Reactief verwijderen van componenten in Vue

Laten we leren hoe we kindcomponenten reactief uit een lijst kunnen verwijderen. Laten we hiervoor in elke kindcomponent een speciale knop maken. Wanneer op deze knop wordt geklikt, wordt een gebeurtenis uitgezonden en in de bovenliggende component wordt de opgegeven kindcomponent verwijderd op basis van zijn id.

Laten we beginnen met de implementatie. Stel dat in de bovenliggende component de volgende array met objecten staat:

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

Laten we in de bovenliggende component een methode schrijven om een gebruiker te verwijderen op basis van zijn id:

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

Laten we componenten in een loop maken, waarbij we hen de naam, achternaam, id en de methode voor verwijdering doorgeven:

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

Laten we de inkomende gegevens in de optie props en de uitgezonden gebeurtenis in de optie emits specificeren:

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

Laten we in de weergave van de component de naam en achternaam van de gebruiker tonen:

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

En laten we nu een knop maken, waar bij het klikken erop een gebeurtenis wordt uitgezonden voor verwijdering. Als parameter van deze gebeurtenis wordt de id van de component doorgegeven. De bovenliggende component zal bij ontvangst van de gebeurtenis deze gebruiker uit de array met objecten verwijderen en hij zal reactief verdwijnen uit de lijst met gebruikers.

Laten we deze knop implementeren:

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

Toon de Employee componenten in een loop. Maak in elke component een knop om deze te verwijderen.