Как отследить scroll страницы только для одного vue компонента который сохраняет состояние(keep-alive)?

Question

[Евгений Хрипунов]

Имеется vue компонент со статьями. Для него прописано состояние keep-alive. При прокрутке к концу страницы статьи автоматически подгружаются из бд. За это отвечает EventListener :

created() {
    // load the data initially
    this.fetchData();
    window.addEventListener('scroll', this.handleScroll);
},

Метод выглядит соответственно вот так :

handleScroll() {
    if ((!this.EndOfDataBase) && ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight - 50) && (!this.l
oading)) {
        this.fetchDataNext()
    }
},

В компоненте так же прописано удаление "EventListener", но так как компонент сохраняет своё состояние (keep-alive), данный метод не удаляет "слушателя скролла".

destroyed() {
            window.removeEventListener('scroll', this.handleScroll);
        }

Проблема возникает, если открыть страницу с данным компонентом, далее открыть другой компонент через vue-router (Приложение SPA), и при прокрутке страницы вниз у другого компонента так же срабатывает метод handleScroll(). Как можно задать отслеживание скролла только в одном конкретном компоненте?

Answer 1

[0xD34F]

В компоненте так же прописано удаление "EventListener", но так как компонент сохраняет своё состояние (keep-alive), данный метод не удаляет "слушателя скролла".

Как подсказывает документация, для keep-alive компонентов доступны хуки activated и deactivated - попробуйте вешать и снимать обработчик скролла в них.

Comments

[Евгений Хрипунов]

Спасибо!