Suppression réactive de composants dans Vue

Apprenons à supprimer réactivement des composants enfants d'une liste. Pour ce faire, créons un bouton spécial dans chaque composant enfant. Lorsqu'on clique sur ce bouton, un événement est émis et le composant parent supprimera le composant enfant spécifié par son id.

Passons à la mise en œuvre. Supposons que le composant parent ait le tableau d'objets suivant :

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

Écrivons dans le composant parent une méthode pour supprimer un utilisateur par son id :

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

Créons les composants dans une boucle, en leur passant en paramètre le nom, le prénom, l'id et la méthode de suppression :

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

Déclarons les données entrantes dans l'option props et l'événement émis dans l'option emits :

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

Affichons dans le template du composant le nom et le prénom de l'utilisateur :

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

Maintenant, créons un bouton qui, lorsqu'on clique dessus, émettra un événement de suppression. Le id du composant sera passé en paramètre de cet événement. Le composant parent, en recevant l'événement, supprimera cet utilisateur du tableau d'objets et il disparaîtra réactivement de la liste des utilisateurs.

Implémentons ce bouton :

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

Affichez les composants Employee dans une boucle. Créez dans chaque composant un bouton pour le supprimer.