Utilizing Vue.js to fetch resources from a Laravel API periodically and paginate(), after retrieving the initial 10 instances, I aim to get the next 10. Here's how my method looks:
scroll () {
window.onscroll = () => {
let bottomOfWindow = document.documentElement.scrollTop + window.innerHeight === document.documentElement.offsetHeight;
if (bottomOfWindow) {
setTimeout(() => {
axios.get('/api/groups')
.then((response) => {
console.log("reached end of window");
Object.assign( {}, this.groups, response.data.meta.total);
})
.catch(error => {
console.log(error)
})
}, 400)
}
}
}
The issues encountered are:
Getting the message in the console while scrolling from bottom to top, reaching the top, instead of vice versa as expected.
Unable to append the next 10 resources with the current setup.
Upon logging response.data.meta, the following is obtained:
current_page: 1
from: 1
last_page: 2
path: "http://www.bla-bla.io/api/groups"
per_page: 10
to: 10
total: 20
__proto__: Object
What seems to be the underlying problem here?
Appreciate your insights!