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

SweetAlert2 not displaying properly in Ionic6 - troubleshooting the issue

Error in Module Building: The path argument must be a string type. A different type was received, which caused the build to fail

Break down the text of a paragraph into separate words, placing each word within its own span element, and then add animations

How can you toggle the visibility of a text based on the selection of a jQuery radio button?

Guide on how to incorporate an external homepage into a quasar/cordova/vue.js mobile application

The onclick event in JavaScript is unresponsive on mobile devices

Troubleshooting JavaScript: Dealing with JSON Import Issues Involving Arrays of Objects

Retrieve file server domain using JavaScript or jQuery

Sending an identifier to a PHP file using JavaScript

JavaScript, PHP handlers, and CommentBox all work together seamlessly to create

Is there a way to alter a class using ng-class only when the form is deemed valid?

Angular.js: The $setDirty() method on a form does not automatically affect its child form elements

Exploring the use of Rails and jQuery to automatically update data through the use of setTimeout and ajax calls

Is it possible for jquery.find() to only target immediate children?

HTML elements generated dynamically do not possess any jQuery properties

Deciphering JavaScript script within a Node.js module

Using third-party libraries like jQuery, CSS, and JavaScript in your React project by directly importing them into the index.html file can be a more efficient approach compared

Updating Variables Declared in Parent Component from a Child Component in React using NextJS - A Comprehensive Guide

I am looking to grasp the concept of the Conditional ternary statement

Every day, I challenge myself to build my skills in react by completing various tasks. Currently, I am facing a particular task that has me stumped. Is there anyone out there who could offer