[Vuejs]-Laravel vue infinite scroll won't pull new data

by

0👍

its because of your load function take look on it,

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

you have set time out for 1000 ms which is called after each scroll
first count is updated by fetch call and then second time its updated by time out call back of load function ,
instead of making this.loading =false after 1000 ms you should make it false on success of fetch call and same thing apply for updating this.count, hope this will help you.

EDIT:

your load function should be like following

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
},

and you fetch function should be like 

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));
}

another thing you can try is ,use getProducts instead of load and remove load function, make this.loading=true in your getProducts function,
previously your getProducts is called only once when component is mounted.you need to call getProducts function each time whenever load more is requested.

Leave a comment