[使用vue.js和laravel创建无限滚动时的无限循环

Question

美好的一天；敬请需要您的支持以完成此问题，我尝试使用laravel和vue.js进行无限滚动，而我的建议是进入有限循环以将请求设置为数据库，并将mu applocation挂断，这是我的代码x组件

<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>

这是我的路线

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

Answer 1

问题1

您绑定distance属性错误。

解决方案

而不是<infinite-loading @distance="1" @infinite="infiniteHandler"></infinite-loading>它应该是<infinite-loading :distance="1" @infinite="infiniteHandler"></infinite-loading>

问题2

在代码中，this.page在$http.get解析之前正在递增。这可能会导致意外的副作用。

解决方案

按照docs vue-infinite-loading hacker news example中的示例，您应该在加载数据后增加页面。