时间戳

首页 > 解决方案 > Laravel vue 无限滚动不会拉新数据

javascript - Laravel vue 无限滚动不会拉新数据

问题描述

我正在使用元素 UI，它具有无限滚动，但我无法让它在我的应用程序中工作。

代码

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

一

我的代码做错了什么？

标签： javascriptlaravelvue.jsvuejs2

解决方案

它是因为你的加载功能看看它，

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

您已经设置了 1000 毫秒的超时时间，在每次滚动后调用第一次计数通过 fetch 调用更新，然后第二次通过加载函数的超时回调更新它，而不是在 1000 毫秒后使 this.loading =false它在 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
},

你的 fetch 函数应该是这样的

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 而不是加载和删除加载函数，在您的 getProducts 函数中设置 this.loading=true，以前您的 getProducts 在安装组件时只调用一次。每次加载时都需要调用 getProducts 函数要求更多。

推荐阅读