我目前正在使用Vue无限加载我的Laravel应用程序来显示数据，我面临的问题是，当页面加载它请求所有数据，即使我不使页面滚动。从我所了解的，它应该只在我的当前滚动在底部时请求。下面是我的代码。

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

            }
}