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

            }
}

Answer 1

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!

Answer 2

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