Vue-dä komponentleri reaksiýaly aýyrmak
Geliň, çaga komponentleri sanawdan
reaksiýaly aýyrmagy öwreneliň.
Bunuň üçin her bir çaga komponentde
ýörite düwmä ýasaýarys.
Bu düwmä basylanynda bir waka
çykaryljak we ata komponentde berlen
çaga komponent onuň id-sy boýunça aýyryljak.
Geliň amala aşyrmaga başlalyň. Ata komponentde aşakdaky jisimler ýygyndysy bolsun:
data() {
return {
users: [
{
id: 1,
name: 'name1',
surn: 'surn1'
},
{
id: 2,
name: 'name2',
surn: 'surn2'
},
{
id: 3,
name: 'name3',
surn: 'surn3'
},
],
}
}
Ata komponentde ulanyjyny onuň id-sy
boýunça aýyrmak üçin usul ýazaýalyň:
methods: {
remove(id) {
this.users = this.users.filter((user) => {
return user.id !== id;
})
}
}
Komponentleri aýlawda döredeliň, olara
ady, familiýasy, id-sy we aýyrmak
üçin usuly parametr hökmünde bereliň:
<template>
<User
v-for ="user in users"
:id ="user.id"
:name ="user.name"
:surn ="user.surn"
@remove ="remove"
:key ="user.id"
/>
</template>
Gelýän maglumatlary props sazlanyşynda
we çykarylýan wakany emits sazlanyşynda görkezeliň:
props: {
id: Number,
name: String,
surn: String,
},
emits: ['remove'],
Komponentiň görkezilisinde ulanyjynyň ady we familiýasyny çykaralyň:
<template>
{{ name }}
{{ surn }}
</template>
Indi bolsa, basylanynda aýyrmak üçin
waka çykarylýan bir düwme ýasaýalyň.
Bu wakanyň parametri hökmünde komponentiň
id-si iberiler.
Ata komponent waka alanynda berlen
ulanyjyny jisimler ýygyndysyndan aýyrar
we ol ulanyjylar sanawyndan reaksiýaly
ýogalar.
Şeýlelik bilen, bu düwmeni amala aşyralyň:
<template>
{{ name }}
{{ surn }}
<button @click="$emit('remove', id)">
remove
</button>
</template>
Aýlawda Employee komponentlerini çykaryň.
Her bir komponentde ony aýyrmak üçin
düwme ýasaň.