Удаление элементов из VueJS

Question

Вообщем у меня есть такая функция:

deleteSection(id) {
    this.$store.dispatch('deleteSection', id).then((response) => {
        EventBus.$emit('removeSectionEl', id);
    }).catch((error) => {});
}

Я вызываё её в одном месте и потом в компоненте родителе родителя срабатывает вот такой слушатель:

EventBus.$on('removeSectionEl', function (id) {
    let section = this.sections.findIndex(sec => sec.id === id);
    this.sections.splice(section, 1);
});

Но при этом почему хватаю такую ошибку: Error in event handler for "removeSectionEl": "TypeError: Cannot read property 'findIndex' of undefined"

Что я делаю не так ?? Мне просто нужно обновить список после удаления эелемента.

Answer 1

Ошибка у Вас в том, что используется обычная функция:

EventBus.$on('removeSectionEl', function (id) {
    let section = this.sections.findIndex(sec => sec.id === id);
    this.sections.splice(section, 1);
});

В результате контекст this.sections теряется и смотрит не на компонент! а на слушатель. Используйте стрелочную функцию

EventBus.$on('removeSectionEl', (id) => {
    let section = this.sections.findIndex(sec => sec.id === id);
    this.sections.splice(section, 1);
});

БЛОГ НА HUSL

Удаление элементов из VueJS

Ответы (1 шт):