Ștergerea reactivă a componentelor în Vue

Să învățăm cum să ștergem în mod reactiv componentele copil dintr-o listă. Pentru a face acest lucru, vom crea un buton special în fiecare componentă copil. La apăsarea acestui buton va fi emis un eveniment și în componenta părinte va fi ștearsă componenta copil specificată după id-ul său.

Să începem implementarea. Să presupunem că în componenta părinte avem următorul array de obiecte:

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

Să scriem în componenta părinte o metodă pentru ștergerea utilizatorului după id-ul său:

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

Să creăm componentele într-un ciclu, transmitându-le ca parametri numele, prenumele, id-ul și metoda pentru ștergere:

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

Să definim datele primite în configurația props și evenimentul emis în configurația emits:

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

Să afișăm în template-ul componentei numele și prenumele utilizatorului:

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

Acum să creăm un buton, la apăsarea căruia va fi emis evenimentul pentru ștergere. Parametrul acestui eveniment va fi id-ul componentei. Componenta părinte la primirea evenimentului va șterge utilizatorul respectiv din array-ul de obiecte și acesta va dispărea în mod reactiv din lista de utilizatori.

Deci, să implementăm acest buton:

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

Afișați într-un ciclu componentele Employee. Creați în fiecare componentă un buton pentru ștergerea acesteia.