Uondoaji wa Vipengele Vilivyo Reactive katika Vue

Hebu tujifunze jinsi ya kuondoa kwa njia ya reactive vipengele vya mtoto kutoka kwenye orodha. Tutafanya kwa hili kifungo maalum katika kila kipengele cha mtoto. Kubonyeza kifungo hiki kitatokea tukio na kwenye kipengele cha mzazi kitaondolewa kipengele cha mtoto kilichobainishwa kupitia id yake.

Tuanze utekelezaji. Hebu kwenye kipengele cha mzazi kuwe na safu hii ya vitu:

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

Tuuandike kwenye kipengele cha mzazi njia ya kuondoa user kupitia id yake:

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

Tutengeneze vipengele kwa mzunguko, tukiwapa kigezo jina, jina la ukoo, id na njia ya kuondoa:

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

Tuweke data zinazoingia katika mpangilio props na tukio linalotokea katika mpangilio emits:

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

Tuonyeshe kwenye muonekano wa kipengele jina na jina la ukoo la user:

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

Na sasa tufanye kifungo, kubonyeza ambayo kutokea tukio la kuondoa. Kigezo cha tukio hili kitapelekwa id ya kipengele. Kipengele cha mzazi kinapopokea tukio kitaondoa user huyu kutoka kwenye safu ya vitu na kwa njia ya reactive kutoweka kutoka kwenye orodha ya users.

Basi, tutekeleze kifungo hiki:

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

Onyesha kwa mzunguko vipengele Employee. Fanya kwenye kila kipengele kifungo kwa ajili ya kuondoa.