Reaktiv fjerning av komponenter i Vue

La oss lære å reaktivt fjerne barnekomponenter fra en liste. La oss lage en spesiell knapp i hver barnekomponent for å gjøre dette. Ved å klikke på denne knappen vil en hendelse bli emitert og i foreldrekomponenten vil den angitte barnekomponenten bli fjernet basert på dens id.

La oss starte implementeringen. Anta at foreldrekomponenten har følgende array av objekter:

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

La oss skrive en metode i foreldrekomponenten for å fjerne en bruker basert på deres id:

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

La oss opprette komponenter i en loop, og sende dem navn, etternavn, id og metoden for fjerning som props:

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

La oss definere innkommende data i props-konfigurasjonen og den emitterte hendelsen i emits-konfigurasjonen:

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

La oss vise brukerens navn og etternavn i komponentens mal:

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

Og la oss lage en knapp som, når den klikkes på, vil emittere en hendelse for fjerning. Parameteren for denne hendelsen vil være id til komponenten. Foreldrekomponenten vil, ved mottak av hendelsen, fjerne denne brukeren fra arrayet av objekter og den vil reaktivt forsvinne fra listen over brukere.

Så, la oss implementere denne knappen:

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

Vis komponentene Employee i en loop. Lag en knapp i hver komponent for å fjerne den.