使用 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 之前递增。这可能会导致意外的副作用。

解决方案

根据文档中的示例 vue-infinite-loading hacker news example 您应该在加载数据后递增页面。

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

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

infinite

infinite-loop

infinite-scroll

vue.js

vuejs2

问题 1

解决方案

问题 2

解决方案