Laravel vue бесконечная прокрутка не будет тянуть новые данные

Question

Я использую элемент интерфейса, и у него есть бесконечная прокрутка , но я не могу заставить его работать в моем приложении.

Код

script

data() {
    return {
        count: '', // default is 8
        total: '', // defalt is 15
        perPage: '', // default is 8
        loading: false,
        products: [],
    }
},
computed: {
    noMore () {
        return this.count >= this.total // if this.count (8) reach this.total (15) then show no more text.
    },
    disabled () {
        return this.loading || this.noMore
    }
},
methods: {
    load () {
        this.loading = true
        setTimeout(() => {
            this.count += this.perPage // add 8 more to page
            this.loading = false
        }, 1000)
    },
    getProducts: function(){
        axios.get('/api/products').then(response => {
            this.products = response.data.data;

            this.count = response.data.meta.per_page; // set count to 8 (backend based)
            this.perPage = response.data.meta.per_page; // set perPage to 8 (backend based)
            this.total = response.data.meta.total; // my testing data are 15 so it sets total to 15 (backend based)
        }).catch((err) => console.error(err));
    }
},
mounted() {
    this.getProducts();
}

HTML

<div class="row mt-5 my-5 infinite-list" v-infinite-scroll="load" infinite-scroll-disabled="disabled"> // load function
    <div class="col-md-3 mb-3" v-for="product in products" :key="product.slug" :offset="1"> // loop function
        <el-card shadow="hover" :body-style="{ padding: '0px' }">
            {{product.name}}
        </el-card>
    </div>

    // infinite functions
    <div class="col-md-12 mt-3" v-if="loading">
        <el-card shadow="always" class="text-center">Loading...</el-card>
    </div>
    <div class="col-md-12 mt-3" v-if="noMore">
        <el-card shadow="always" class="text-center">That's it, No more!</el-card>
    </div>
</div>

Meta data

Result

Что я сделал не так в своем коде?

Answer 1

это из-за вашей функции загрузки,

 load () {
    this.loading = true
    setTimeout(() => {
        this.count += this.perPage // add 8 more to page
        this.loading = false
    }, 1000)
  },

вы установили тайм-аут на 1000 мс, который вызывается после того, как каждый счетчик прокрутки обновляется первым вызовом выборки, а затем во второй раз обновляется по истечении времени ожидания обратного вызова функции загрузки, вместо того, чтобы сделать this.loading = false через 1000 мс, вы должны сделать его ложным при успешном вызове fetch, и то же самое применимо для обновления this.count, надеюсь, это поможет вам.

РЕДАКТИРОВАТЬ:

ваша функция загрузки должна быть похожа на

load () {
this.loading = true
this.getProducts();//previously you getproduct is called once only after mounted,you you need to call it each time whenever load is called
},

, а функция выборки должна быть похожа на

getProducts: function(){
    axios.get('/api/products').then(response => {
        this.products = response.data.data;
        this.count += this.perPage // add 8 more to page
    this.loading = false
        this.perPage = response.data.meta.per_page; // set perPage to 8 (backend based)
        this.total = response.data.meta.total; // my testing data are 15 so it sets total to 15 (backend based)
    }).catch((err) => console.error(err));
}

другое вы можете попробовать это, использовать getProducts вместо load и удалить функцию load, сделайте this.loading = true в вашей функции getProducts, ранее ваш getProducts вызывался только один раз, когда компонент монтируется. Вам нужно вызывать функцию getProducts каждый раз, когда загружается больше просьба.