Реактивно брисање компоненти у Vue

Хајде да научимо реактивно да бришемо детет компоненте са листе. Урадимо за то у свакој детет компоненти специјално дугме. Притиском на ово дугме ће се емитовати догађај и у родитељској компоненти ће се брисати задата детет компонента по њеном id.

Приступимо реализацији. Нека у родитељској компоненти постоји следећи низ објеката:

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

Напишимо у родитељској компоненти метод брисања корисника по његовом id:

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

Креирајмо компоненте у циклусу, проследивши им параметром име, презиме, id и метод за брисање:

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

Опишимо улазне податке у подешавању props и догађај који се емитује у подешавању emits:

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

Прикажимо у презентацији компоненте име и презиме корисника:

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

А сада направимо дугме, притиском на које ће се емитовати догађај за брисање. Параметром овог догађаја ће се прослеђивати id компоненте. Родитељска компонента при пријему догађаја ће обрисати датог корисника из низа објеката и он ће реактивно нестати са листе корисника.

Дакле, реализујмо ово дугме:

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

Прикажите у циклусу компоненте Employee. Направите у свакој компоненти дугме за њено брисање.