Reaktiv fjernelse af komponenter i Vue

Lad os lære at reaktivt fjerne underordnede komponenter fra en liste. Lad os lave en speciel knap i hver underordnet komponent for at gøre dette. Når der klikkes på denne knap, vil en hændelse blive udsendt, og den angivne underordnede komponent vil blive fjernet i den overordnede komponent ved dens id.

Lad os gå i gang med implementeringen. Antag, at den overordnede komponent har følgende array af objekter:

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

Lad os skrive en metode i den overordnede komponent til at fjerne en bruger baseret på deres id:

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

Lad os oprette komponenter i en løkke, hvor vi sender navn, efternavn, id og fjernelsesmetoden som parametre:

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

Lad os definere de indgående data i props konfigurationen og den udsendte hændelse i emits konfigurationen:

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

Lad os vise brugerens for- og efternavn i komponentets presentation:

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

Og lad os nu lave en knap, hvor der ved klik udsendes en hændelse for fjernelse. Parameteren for denne hændelse vil være komponentens id. Den overordnede komponent vil, når den modtager hændelsen, fjerne denne bruger fra arrayet af objekter, og de vil reaktivt forsvinde fra listen over brugere.

Lad os implementere denne knap:

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

Vis komponenterne Employee i en løkke. Lav en knap i hver komponent for at fjerne den.