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

Имеется 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(). Как можно задать отслеживание скролла только в одном конкретном компоненте?
  • Вопрос задан
  • 2191 просмотр
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
В компоненте так же прописано удаление "EventListener", но так как компонент сохраняет своё состояние (keep-alive), данный метод не удаляет "слушателя скролла".

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы