Реактивно бришење на компоненти во 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. Направете во секоја компонента копче за нејзино бришење.