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

Question

我正在使用元素 UI，它有 infinite scroll，但我无法让它在我的应用程序中工作。

代码

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 毫秒的超时时间，每次滚动后都会调用该超时时间 第一次计数由 fetch 调用更新，然后第二次由加载函数的超时回调更新， 而不是在 1000 毫秒后使 this.loading =false 你应该在 fetch 调用成功时将其设为 false 并且同样的事情适用于更新 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 函数。