infinite loop when create infinite scroll using vue.js and laravel

Question

good day; kindly need your support to finalize this issue i try to make infinite scrolle using laravel and vue.js and my proplem is get in finite loop to set request to data base and mu applocation hang up this is my code x component

<template>
    <div class="container" style="margin-top:50px;">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header"><strong> Laravel Vue JS Infinite Scroll - ItSolutionStuff.com</strong></div>

                    <div class="card-body">
                        <div>
                            <p v-for="item in list">
                                <a v-bind:href="'https://itsolutionstuff.com/post/'+item.slug" target="_blank">{{item.title}}</a>
                            </p>
                              <infinite-loading @distance="1" @infinite="infiniteHandler"></infinite-loading>


                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>


<script>

    export default {


        mounted() {
            alert()
            console.log('Component mounted.')
        },
        data() {
            return {
                list: [],
                page: 1,
            };
        },
        methods: {
            infiniteHandler($state) {
                let vm = this;

                this.$http.get('/Services?page='+this.page)
                    .then(response => {
                        return response.json();
                    }).then(data => {
                    $.each(data.data, function(key, value) {
                        vm.list.push(value);
                    });
                    $state.loaded();
                });

                this.page = this.page + 1;
            },

        },
    }
</script>

this is my route

Route::get('/Services', 'ServicesController@Services');

Answer 1

Problem 1

You are binding to the distance property wrong.

Solution

Instead of
<infinite-loading @distance="1" @infinite="infiniteHandler"></infinite-loading>
it should be
<infinite-loading :distance="1" @infinite="infiniteHandler"></infinite-loading>

Problem 2

In the code, this.page is being incremented before $http.get is resolved. This may result in unintentional side effects.

Solution

As per the example in docs vue-infinite-loading hacker news example you should be incrementing the page after data is loaded.