S
S
starosta462018-12-28 19:32:40
Vue.js
starosta46, 2018-12-28 19:32:40

Why does Vue.js method fire twice?

I'm trying to organize the loading of data on the page when the end is reached, for this there is:

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
}
})

When scrolling to the bottom of the page, the request to the server is sent twice, although there is a variable that blocks this. With what it can be connected?
PS Code pieces are pulled out of the "working" project, so there may be syntax errors, please do not kick. But the logic is preserved.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
0
0xD34F, 2018-12-28
@starosta46

a request to the server is sent twice, although there is a variable that blocks this

There is no such variable. There is a variable that could be used in a similar capacity - loading, if you check at the beginning of the upload method that it is not true - but it is not used in any way (at least in the code snippet you showed).
UPD. Taken from the comments:
And what is the point of this check if you reset the value of end to false immediately after setting it to true? It is possible to wait for the request to complete - by moving it to finally (however, this in itself does not guarantee that you will not be able to send the next request until the previous one has finished). this.end = false

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question