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');

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

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.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 2, 2020 at 9:54

spc

4472 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Problem 1

Solution

Problem 2

Solution

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Problem 1

Solution

Problem 2

Solution

Comments

Your Answer

Sign up or log in

Post as a guest

Related