Vue Infinite Loading multiple request issue when page loads

Question

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() {

            }
}

take a look at this link: (http://www.laraphp.com/vue-infinite-scroll-laravel/vue-js/) — Mohamed Melouk, Jun 25 '18 at 03:57
Have you checked your network tab to see what URL the request is being sent to? This smells like the wrong url... — Travis Heeter, Jan 04 '19 at 18:02

score 1 · Answer 1 · answered Jul 10 '20 at 19:22

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!

score 1 · Answer 2 · answered Aug 12 '21 at 09:57

1

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

answered Aug 12 '21 at 09:57

Dmitry

11
1

score 0 · Answer 3 · answered Nov 11 '22 at 03:24

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.

Vue Infinite Loading multiple request issue when page loads

3 Answers3