Reaktiv borttagning av komponenter i Vue

Låt oss lära oss att reaktivt ta bort underordnade komponenter från en lista. För att göra detta, låt oss skapa en speciell knapp i varje underordnad komponent. När denna knapp klickas kommer en händelse att emitteras och den angivna underordnade komponenten kommer att tas bort i den föräldrakomponenten genom dess id.

Låt oss börja med implementationen. Antag att föräldrakomponenten har följande array av objekt:

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

Låt oss skriva en metod i föräldrakomponenten för att ta bort en användare baserat på dess id:

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

Låt oss skapa komponenter i en loop, och skicka dem namn, efternamn, id och metoden för borttagning som props:

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

Definiera de inkommande datan i props-konfigurationen och den emitterade händelsen i emits-konfigurationen:

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

Låt oss rendera användarens namn och efternamn i komponentens mall:

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

Och nu skapar vi en knapp, vid klick på vilken en händelse för borttagning kommer att emitteras. id för komponenten kommer att skickas som en parameter för denna händelse. När föräldrakomponenten tar emot händelsen kommer den att ta bort denna användare från arrayen av objekt och den kommer reaktivt att försvinna från listan över användare.

Låt oss implementera denna knapp:

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

Rendera Employee-komponenter i en loop. Skapa en knapp i varje komponent för att ta bort den.