бесконечный l oop при создании бесконечной прокрутки с использованием vue. js и laravel - PullRequest
Новая
       49

бесконечный l oop при создании бесконечной прокрутки с использованием vue. js и laravel

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

добрый день; пожалуйста, нуждайтесь в вашей поддержке, чтобы решить эту проблему. Я пытаюсь сделать бесконечную прокрутку, используя laravel и vue. js, и моя задача - получить конечный l oop, чтобы установить запрос к базе данных, и 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');

looops

1 Ответ

1 голос
/ 02 апреля 2020

Проблема 1

Вы связываете свойство distance неправильно.

Решение

Вместо <infinite-loading @distance="1" @infinite="infiniteHandler"></infinite-loading> должен быть <infinite-loading :distance="1" @infinite="infiniteHandler"></infinite-loading>

Задача 2

В коде значение this.page увеличивается до разрешения $http.get. Это может привести к непреднамеренным побочным эффектам.

Решение

Согласно примеру с документами vue - пример хакерских новостей с бесконечной загрузкой вы должны увеличивать страницу после данные загружены.

...