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>

Энди esa, босилганда ўчириш учун воқеа чиқарадиган тугма ясаймиз. Ушбу воқеанинг параметри сифатида компонентнинг id ўтади. Ота компонент воқеани олганда берилган фойдаланувчини объектлар массивидан ўчиради ва у фойдаланувчилар рўйхатидан реактив тарзда йўқолади.

Демак, ушбу тугмани амалга оширамиз:

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

Циклда Employee компонентларини чиқаринг. Ҳар бир компонентда уни ўчириш учун тугма ясанг.