Heqja Reaktive e Komponentëve në Vue

Të mësojmë se si të heqim në mënyrë reaktive komponentët fëmijë nga një listë. Për ta bërë këtë, le të krijojmë në secilin komponent fëmijë një buton special. Me klikim në këtë buton do të emetohet një ngjarje dhe në komponentin prind do të hiqet komponenti fëmijë i specifikuar sipas id-së së tij.

Le të fillojmë zbatimin. Le të supozojmë se në komponentin prind ekziston grupi i mëposhtëm i objekteve:

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

Le të shkruajmë në komponentin prind metodën për heqjen e përdoruesit sipas id-së së tij:

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

Le të krijojmë komponentët në një cikël, duke u kaluar atyre si parametër emrin, mbiemrin, id dhe metodën për heqje:

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

Le të përcaktojmë të dhënat hyrëse në konfigurimin props dhe ngjarjen e emetuar në konfigurimin emits:

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

Le të shfaqim në pamjen e komponentit emrin dhe mbiemrin e përdoruesit:

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

Dhe tani le të krijojmë një buton, me klikim në të cilin do të emetohet ngjarja për heqje. Si parametër i kësaj ngjarje do të kalohet id e komponentit. Komponenti prind pas marrjes së ngjarjes do të fshijë këtë përdorues nga grupi i objekteve dhe ai do të zhduket në mënyrë reaktive nga lista e përdoruesve.

Pra, le ta implementojmë këtë buton:

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

Shfaqni në një cikël komponentët Employee. Krijoni në secilin komponent një buton për heqjen e tij.