@starosta46

Почему метод Vue.js срабатывает дважды?

Пытаюсь организовать подгрузку данных на страницу при достижении конца, для этого есть:
var demo = new Vue({
    el: '#demo',
    data: {
        gridData: null,
        end : false
    },
    methods: {
        scroll: function () {
            window.onscroll = () => {
                if (this.end == false) {
                    let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight === document.documentElement.offsetHeight;

                    if (bottomOfWindow) {
                        this.end = true
                        
                        console.log("end")
                        this.upload()
                    }
                    this.end= false
                }
            };
        },
upload: function () {
            this.errored = false;
            this.loading = true;
            axios
                .get('http://localhost:8000')
                .then(response => {

                    this.gridData = response.data.content;
                })
                //.then(response => console.log(response))
                .catch(error => {
                    console.log(error)
                    this.errored = true;
                })


                .finally(() => {
                    this.loading = false;
                    this.time = null;
                });




        },
 mounted: function () {
        this.scroll
}
})


При прокрутке до конца страницы запрос на сервер отправляется два раза, хотя есть переменная, которая это блокирует. С чем это может быть связано?

P. S. куски кода выдернуты из "рабочего" проекта, поэтому могут присутствовать синтаксические ошибки, просьба не пинать. Но логика сохранена.
  • Вопрос задан
  • 95 просмотров
Решения вопроса 1
0xD34F
@0xD34F
запрос на сервер отправляется два раза, хотя есть переменная, которая это блокирует

Нет такой переменной. Есть переменная, которая могла бы в подобном качестве использоваться - loading, если проверять в начале метода upload, что она не true - но она не используется никак (по крайней мере, в показанном вами огрызке кода).

UPD. Вынесено из комментариев:

есть переменная end, статус которой проверяется постоянно

А какой смысл в этой проверке, если вы сбрасываете значение end в false сразу после того, как выставили true? Можно дожидаться выполнения запроса - перенеся this.end = false в finally (однако, само по себе это не гарантирует, что вы не сможете отправлять следующий запрос до окончания предыдущего).
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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