CODEWITHSUNDEEP
javascriptvue.jsinfinite-scrollvue-component
PenAndPapers
PenAndPapers

Reputation: 2108

Vue Infinite Loading multiple request issue when page loads

I'm currently using Vue Infinite Loading on my Laravel App to display data, the problem I'm facing is that by when page loads it request all data even if I dont make a page scroll. From what I've understand it should only make request when my current scroll is at the bottom. Below is my code.

<infinite-loading :on-infinite="onInfinite" spinner="spiral" ref="infiniteLoading">
    <span slot="no-more"></span>
</infinite-loading>



     import InfiniteLoading from 'vue-infinite-loading';

    export default {
            data: function(){
                return {
                    leagueLeaders: [],
                    playerStats: [],
                    pagination: 1,
                }
            },
            methods: {
                components: {
                    InfiniteLoading,
                },
                onInfinite() {
                    let self  = this;
                    axios.get(config.NBLAPI + config.API.PLAYERSTATS2, {
                        params: { 
                            page: self.pagination,
                        }
                    }).then( (response) => {
                        let data = response.data.data;
                        let lastpage = response.data.last_page;

                        if ( response.status == 200 && data.length > 0) {
                            self.leagueLeaders = self.leagueLeaders.concat(data);
                            self.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');
                            if(self.pagination <= lastpage){
                                self.pagination += 1;
                            }
                        }
                        else {
                            self.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                        }
                    });
                },
            },
            mounted: function() {

            }
}

Upvotes: 7

Views: 5250

Answers (3)

Yan Hairul Firdan
Yan Hairul Firdan

Reputation: 11

this behavior happens because, after your first request, you fired event loaded self.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded'); and your data was not shown on your page completely.

since the data does not yet show completely it will left remain space and the vue-infinite-loading will assume that it will need to make more requests.

to prevent that, you can simply defer self.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded'); for several seconds using setTimeout() function to wait for your data rendered on your page.

Upvotes: 0

Dmitry
Dmitry

Reputation: 11

Solved the problem by removing overflow:hidden; on parent element

Upvotes: 1

lanmaster53
lanmaster53

Reputation: 29

I noticed the same behavior and figured out what was causing it on my end. If the first page of results doesn't fill up the wrapping UI element, then Vue Infinite Loading will auto page until it does. This was causing 2 page loads on initial load when I wasn't putting enough data to fill the element on the first. I used dev tools to reduce the size of the UI until the initial load filled the element, and then it worked as expected. Hope this helps!

Upvotes: 1

Related Questions