Laravel vue infinite scroll failing to load additional content

Question

Laravel vue infinite scroll failing to load additional content

I've been trying to implement the infinite scroll feature from Element UI in my app, but for some reason, it's just not working. Here's a snippet of my code:

Code

script

// Your JavaScript code goes here
            // Make sure you have imported Axios for API calls

HTML

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

            <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

Your meta data link goes here

Result

Link to your result image

Any idea what could be going wrong with my implementation?

javascript laravel vue.js vuejs2

Answer 1

Answer №1

it seems like the issue lies within your load function, let's take a closer look at it.

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

the timeout of 1000 ms in your load function is causing some timing issues. Instead of setting this.loading to false after 1000 ms, consider setting it to false upon successful completion of the fetch call. The same goes for updating this.count. Hope this insight helps you resolve the issue.

EDIT:

your revised load function should be like the following

load () {
this.loading = true
this.getProducts(); // calling getProducts each time load is triggered
},

and your fetch function should resemble the code below

getProducts: function(){
    axios.get('/api/products').then(response => {
        this.products = response.data.data;
        this.count += this.perPage 
        this.loading = false
        this.perPage = response.data.meta.per_page; 
        this.total = response.data.meta.total; 
    }).catch((err) => console.error(err));
}

consider using getProducts instead of load and removing the load function entirely. Set this.loading=true within your getProducts function. Previously, getProducts was only called once during component mounting, but now it needs to be triggered every time a load more action is requested.

Answer 2

it seems like the issue lies within your load function, let's take a closer look at it.

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

the timeout of 1000 ms in your load function is causing some timing issues. Instead of setting this.loading to false after 1000 ms, consider setting it to false upon successful completion of the fetch call. The same goes for updating this.count. Hope this insight helps you resolve the issue.

EDIT:

your revised load function should be like the following

load () {
this.loading = true
this.getProducts(); // calling getProducts each time load is triggered
},

and your fetch function should resemble the code below

getProducts: function(){
    axios.get('/api/products').then(response => {
        this.products = response.data.data;
        this.count += this.perPage 
        this.loading = false
        this.perPage = response.data.meta.per_page; 
        this.total = response.data.meta.total; 
    }).catch((err) => console.error(err));
}

consider using getProducts instead of load and removing the load function entirely. Set this.loading=true within your getProducts function. Previously, getProducts was only called once during component mounting, but now it needs to be triggered every time a load more action is requested.

Laravel vue infinite scroll failing to load additional content

Code

Answer №1

Similar questions

Create an Oval-Shaped Image Cutout

PHP live data updating: stay current with real-time data updates

What are the best practices for implementing jquery owlCarousel within an Angular 4 component?

Is there a way to trigger a "click" on a webpage without physically clicking? So that I can preview the response message before actually clicking

Simulating a JavaScript constructor using Sinon.JS

The Handsontable popup autocomplete editor is unfortunately truncated by the horizontal scrollbar

Having issues with my custom AngularJS directive functionality

Having trouble with a jQuery.validationEngine reference error?

"We encountered an error with the external script while trying to load file content using jQuery's ajax function. It

Creating a hierarchical tree structure using the v-for directive by incorporating parentid and order properties

What is the best way to implement CSS rules for a hidden submenu?

The Typescript compiler will continue to generate JavaScript code even if there are compilation errors

Configuring a Selenium Firefox profile

What occurs when the update function returned by React.useState() is invoked?

When using JQuery's :first selector, it actually chooses the second element instead of the first

Convert your Airbnb short link into the full link

What is the method for accessing an image in JavaScript?

Exploring VueJS templating: Loading external templates

AngularJS: Triggering events in one controller to update data in another controller

Exploring the Efficiency Enhancements in the next/image Optimization Process within Next.js