Reaktīva komponentu dzēšana Vue

Iemācīsimies reaktīvi dzēst meitas komponentus no saraksta. Lai to izdarītu, katrā meitas komponentā izveidosim īpašu pogu. Nospiežot šo pogu, tiks izsaukts notikums un vecākkomponentā tiks izdzēsts norādītais meitas komponents pēc tā id.

Sāksim ar implementāciju. Lai vecākkomponentā ir dots šāds objektu masīvs:

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

Rakstīsim vecākkomponentā metodi lietotāja dzēšanai pēc tā id:

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

Izveidosim komponentus ciklā, nododot viņiem parametru vārdu, uzvārdu, id un metodi dzēšanai:

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

Norādām ienākošos datus iestatījumā props un izsaukto notikumu iestatījumā emits:

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

Attēlosim komponenta priekšskatījumā lietotāja vārdu un uzvārdu:

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

Un tagad izveidosim pogu, kuras nospiešanas reizē tiks izsaukts notikums dzēšanai. Šī notikuma parametrā tiks nodots komponenta id. Vecākkomponents, saņemot notikumu, izdzēsīs doto lietotāju no objekta masīva un tas reaktīvi pazudīs no lietotāju saraksta.

Tātad, implementēsim šo pogu:

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

Attēlojiet ciklā komponentus Employee. Katrā komponentā izveidojiet pogu tā dzēšanai.