Vue infinite scroll with axios


#1

Im trying to configure vue-infinite-scroll plugin with axios
this is codesansbox link https://codesandbox.io/s/9oqml4vyyr


#2

You should provide more specific information about your issue.


#3

As @JamesThomson said you should explain your problem in your post (giving a link to your sandbox is not enough for us and we should not waste our time finding the issues in your code.

Regarding infinite scroll - you have to implement a paging mechanism in front-end or back-end.
infinite-scroll-distance is not the paging limit but the % of last element visibility when to trigger next page.

Either get all results and implement paging in Javascript or in back-end with start index and size.


#4

Thanks Andris :slight_smile:
I’m doing javascript client side with vue-infinite-scroll plugin. The problem when scroll down, I’m having a lot of errors of duplicate keys detected, ending up in infinite loop!
I might calling the function loadMore many times ?! wiered!
I need to achieve normal behavior. loading initially 10 posts then when I scroll down loading 10 more and hence

<template>
 <div class="app">
  
   <ul>
   <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="limit">
     <li v-for="photo in photos" :key="photo.id">
     <img :src="photo.thumbnailUrl" height="30"> <br>
      <p>Title: {{photo.title}}</p> <br>
   
     <br>
     </li>
     </div>
   </ul>
   </div>
 
</template>
<script>
import axios from "axios";

export default {
 name: "Home",
 data() {
   return {
     msg: "Welcome to Your Vue.js App",
     photos: [],
     results: [],
     busy: false,
     limit: 10
   };
 },
 methods: {
  
   loadMore() {
      this.busy = true;
     
     axios.get("https://jsonplaceholder.typicode.com/photos").then(res => {
       this.photos.push(...res.data);
     
        let items = [];
       for (let i = 0, j = this.limit; i < j; i++) {
         items.push({});
       }
       this.photos = this.photos.concat(items);
       
     });
     this.busy = false;
     }
 },
 created() {
 this.loadMore();
  
 }
};
</script>

#5

Read my previous reply carefully, I already answered your issue.

Open the URL, you are using - it by default returns you 5000 items:
https://jsonplaceholder.typicode.com/photos

You have to implement a paging mechanism.


#6

Thanks I got it :ok_hand:


#7

Not related but your logic for the busy flag is not quite right. Because the API request using axios is asynchronous, that statement completes immediately.
as such this is what might actually happen

this.busy = true;
axios.get()..
this.busy = false;
then(...)

If you want to have the thing disabled whilst it is fetching data you’ll need to unset the busy flag inside the promise

this.busy = true;
axios.get(...).then(() => {
  // do stuff
  this.busy = false;
}).catch((err) => {
  this.busy = false;
});

#8

Thanks for help :grinning: … I’ve done it successfully this way

loadMore() {
      this.busy = true;   
      axios.get("https://jsonplaceholder.typicode.com/photos").then(res => {
        const append = res.data.slice(this.photos.length,this.photos.length + this.limit )         
        this.photos = this.photos.concat(append);
        this.busy = false;
      }).catch( (err) => {
        this.busy = false;
      })
   
    }

#9

add if(! this.busy){…} in loadMore methods for prevent duplicates data load

loadMore() {
 if(! this.busy){
  this.busy = true;   
  axios.get("https://jsonplaceholder.typicode.com/photos").then(res => {
    const append = res.data.slice(this.photos.length,this.photos.length + this.limit )         
    this.photos = this.photos.concat(append);
    this.busy = false;
  }).catch( (err) => {
    this.busy = false;
  })
 }
}