Reaktives Entfernen von Komponenten in Vue

Lassen Sie uns lernen, wie man Kindkomponenten reaktiv aus einer Liste entfernt. Erstellen wir dazu in jeder Kindkomponente eine spezielle Schaltfläche. Beim Klicken auf diese Schaltfläche wird ein Ereignis ausgelöst und in der Elternkomponente wird die angegebene Kindkomponente anhand ihrer id entfernt.

Beginnen wir mit der Implementierung. Angenommen, in der Elternkomponente gibt es das folgende Array von Objekten:

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

Schreiben wir in der Elternkomponente eine Methode zum Entfernen eines Users anhand seiner id:

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

Erstellen wir die Komponenten in einer Schleife und übergeben wir ihnen als Parameter den Namen, den Nachnamen, die id und die Methode zum Entfernen:

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

Definieren wir die eingehenden Daten in der Option props und das auslösbare Ereignis in der Option emits:

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

Geben wir in der Darstellung der Komponente den Namen und den Nachnamen des Users aus:

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

Erstellen wir nun eine Schaltfläche, bei deren Betätigung ein Ereignis zum Entfernen ausgelöst wird. Als Parameter dieses Ereignisses wird die id der Komponente übergeben. Die Elternkomponente entfernt beim Empfang des Ereignisses diesen User aus dem Array der Objekte und er verschwindet reaktiv aus der Liste der User.

Implementieren wir also diese Schaltfläche:

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

Geben Sie die Komponenten Employee in einer Schleife aus. Erstellen Sie in jeder Komponente eine Schaltfläche zu deren Entfernung.