Rimozione reattiva dei componenti in Vue

Impariamo a rimuovere in modo reattivo i componenti figli da un elenco. Per fare ciò, creiamo un pulsante speciale in ogni componente figlio. Alla pressione di questo pulsante viene emesso un evento e nel componente genitore verrà rimosso il componente figlio specificato tramite il suo id.

Iniziamo con l'implementazione. Supponiamo che nel componente genitore ci sia il seguente array di oggetti:

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

Scriviamo nel componente genitore un metodo per rimuovere l'utente tramite il suo id:

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

Creiamo i componenti in un ciclo, passando loro come parametri nome, cognome, id e il metodo per la rimozione:

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

Definiamo i dati in entrata nell'opzione props e l'evento emesso nell'opzione emits:

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

Visualizziamo nel template del componente nome e cognome dell'utente:

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

Ora creiamo un pulsante, alla cui pressione viene emesso un evento per la rimozione. Come parametro di questo evento viene passato il id del componente. Il componente genitore, alla ricezione dell'evento, rimuoverà questo utente dall'array di oggetti e esso scomparirà reattivamente dall'elenco degli utenti.

Quindi, implementiamo questo pulsante:

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

Visualizza in un ciclo i componenti Employee. Crea in ogni componente un pulsante per la sua rimozione.