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

Posted 2023-02-23

【中文标题】使用 laravel 和 vue 的无限滚动请求未发送以显示数据

【英文标题】：infinite scroll using laravel and vue request not sent to display data

【发布时间】：2020-07-12 04:07:25

【问题描述】：

美好的一天； 我是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" >
                    خدمات لوجستية متكاملة
                </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`" >
                                    </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>

【参考方案1】：

你还没有声明 vue-infinite-loading

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

【讨论】：

请不要只发布代码作为答案，还要解释您的代码的作用以及它如何解决问题的问题。带有解释的答案通常质量更高，更有可能吸引投票。

@David Buck 是的，对不起 :)