How get data lists from json using Vue axios infinite scroll - json

Question

I would like to import the data from Vue.js to axios and apply the infinite scroll.
and want to have json data displayed in order. Now only index [0] is being repeated. How can we solve it? Thank you.
https://jsfiddle.net/naeun/eywraw8t/131773/
<div id="app">
<section data-aos="fade-zoom-in" v-for="post in posts">
<div class="post">
<p class="colon" data-aos="fade-zoom-in"><span>“</span></p>
<p class="quote">{{post.quote}}</p>
<p class="colon" data-aos="fade-zoom-in"><span>”</span></p>
<p class="author" data-aos="fade-zoom-in">{{post.author}}</p>
</div>
</section>
</div>
new Vue({
el: "#app",
data: {
bottom: false,
posts: []
},
methods: {
bottomVisible() {
const scrollY = window.scrollY;
const visible = document.documentElement.clientHeight;
const pageHeight = document.documentElement.scrollHeight;
const bottomOfPage = visible + scrollY >= pageHeight;
return bottomOfPage || pageHeight < visible;
},
addPost() {
axios.get(`https://jsonplaceholder.typicode.com/posts`)
.then(response => {
let api = response.data[0];
let apiInfo = {
author: api.id,
quote: api.title,
tag: api.body
};
this.posts.push(apiInfo)
if(this.bottomVisible()) {
this.addPost();
}
})
.catch(e => {
console.log('Error: ', error)
})
}
},
watch: {
bottom(bottom) {
if (bottom) {
this.addPost();
}
}
},
created() {
window.addEventListener('scroll', () => {
this.bottom = this.bottomVisible()
});
this.addPost();
}
})

Answer 1

There are a few problems here. First, whenever you scroll to the bottom, you call the addPost method, right? But the method itself doesn't know which "page" to load. It does the very same request over and over again. Which means it gets the same results each time.
Then you use this let api = response.data[0];, which means that no matter what results you receive, you only get the first item from the list and push it to your local array.
What you need to do is to keep track of the virtual "page" that you are loading, meaning that each addPost is like loading additional items from a virtual pagination and just putting them at the end of the infinite list, instead of reloading the page. Then you need to pass this parameter to the method that loads those new items and prepare the backend to return specific items based on request parameters.
Good luck!