Vue-da Komponentlarni Reaktiv Olib Tashlash

Keling, ro'yxatdan farzand komponentlarni reaktiv olib tashlashni o'rganamiz. Buning uchun har bir farzand komponentda maxsus tugma yaratamiz. Ushbu tugma bosilganda hodisa yuzaga keladi va ota komponentda berilgan farzand komponent uning id si bo'yicha olib tashlanadi.

Keling, amalga oshiramiz. Ota komponentda quyidagi ob'ektlar massivi mavjud bo'lsin:

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

Ota komponentda foydalanuvchini uning id si bo'yicha o'chirish usulini yozamiz:

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

Komponentlarni tsiklda yaratamiz, ularga ism, familiya, id va o'chirish usulini parametr sifatida uzatamiz:

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

props sozlamasida kiruvchi ma'lumotlarni va emits sozlamasida chiqariladigan hodisani belgilaymiz:

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

Komponentning ko'rinishida foydalanuvchi ismi va familiyasini chiqaramiz:

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

Endi esa, bosilganda o'chirish hodisasini chiqaradigan tugma yaratamiz. Ushbu hodisa parametri sifatida komponentning id si uzatiladi. Ota komponent hodisani qabul qilib olganda foydalanuvchini ob'ektlar massividan o'chiradi va u foydalanuvchilar ro'yxatidan reaktiv ravishda yo'qoladi.

Keling, ushbu tugmani amalga oshiramiz:

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

Tsiklda Employee komponentlarini chiqaring. Har bir komponentda uni o'chirish uchun tugma yarating.