Реактивное удаление компонентов в 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>
А теперь сделаем кнопку, по нажатию
на которую будет испускаться событие
для удаления. Параметром этого события
будет передаваться id компонента.
Родительский компонент при получении
события удалит данного юзера из массива
объектов и он реактивно исчезнет
из списка юзеров.
Итак, реализуем эту кнопку:
<template>
{{ name }}
{{ surn }}
<button @click="$emit('remove', id)">
remove
</button>
</template>
Выведите в цикле компоненты Employee.
Сделайте в каждом компоненте кнопку
для его удаления.