бесконечная прокрутка с использованием laravel и vue запроса не отправляется для отображения данных - PullRequest
Новая
       2

бесконечная прокрутка с использованием laravel и vue запроса не отправляется для отображения данных

0 голосов
/ 31 марта 2020

добрый день; я новичок в 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>

1 Ответ

0 голосов
/ 19 апреля 2020

вы не объявили vue -infinite-loading 


import InfiniteLoading from 'vue-infinite-loading';

export default {
    components: {
     InfiniteLoading,
    },
...