使用 laravel 和 vue 的无限滚动请求未发送以显示数据

Question

美好的一天； 我是vue.js 的新成员 当我使用无限滚动时我有一个简单的问题我进行如下配置但是当页面重新加载时它必须向数据库发送请求以在页面=1时显示数据此请求未发送 我需要帮助让它工作 这是我的 这是服务组件

<template>
    <div>
        <!-- start covr-page --------------------- -->
        <div class="covr-page">
            <h2>خدمات لوجستية متكاملة </h2>
            <div class="overlay"></div>
        </div>
        <!-- end covr-page --------------------- -->

        <!-- start servic --------------------- -->
        <div class="servic sections">
            <div class="container">
                <h3 class="start-title">
                    <img src="/images/start-title.png" alt="">
                    خدمات لوجستية متكاملة
                </h3>

                <div class="row">

                    <div v-for="service,key in list" class="col-lg-offset-3 col-lg-6 col-md-12 col-md-8 col-sm-offset-1 col-sm-10">
                        <a href="order-service.html">
                            <div class="email-signature">
                                <div class="signature-details">
                                    <div class="signature-img">
                                        <img :src="`upload/${service.icon}`" alt="">
                                    </div>

                                </div>
                                <div class="contant-serv">
                                    <h4>{{service.ar_name}}</h4>
                                    <p>
                                        {{service.ar_description}}
                                    </p>
                                </div>
                            </div>
                        </a>
                    </div>
                    <infinite-loading @distance="100" @infinite="infiniteHandler"></infinite-loading>
                </div>

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

这是我的路线

Route::get('/Services', 'ServicesController@Services'); 这是我的js代码

<script>


    export default {
        name: "Services",

        data: function () {
            return {
                list: [],
                page:1


            }
        },
        mounted(){
           // this.infiniteHandler()

            // axios.get('/Services')
            //     .then((response) =>{
            //         this.list=response.data
            //     }).catch((error) =>this.errors=error.response.data.errors );
        },
        methods: {
            infiniteHandler($state) {
                this.$http.get('/Services?page='+this.page)
                    .then(response => {
                        return response.json();
                    }).then(data => {
                    $.each(data.data, (key, value)=> {
                        this.list.push(value);
                    });
                    $state.loaded();

                });

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




    }
</script>

Answer 1

你还没有声明 vue-infinite-loading

从'vue-infinite-loading'导入InfiniteLoading； 导出默认 { 成分： { 无限加载， },