Currently, I'm facing an issue with accessing data using pagination and lazy loading. The pagination system works fine for the first request, but the last parameter increment at the end of the page is not functioning as expected. For instance, when I try to change the last parameter at the end of the page from to and so on, the system fails to respond correctly. I've experimented with various methods to increment the parameter but haven't had any success.
new Vue({
el: "#app",
data: {
posts: [],
limit: 8,
busy: false
},
methods: {
loadMore() {
console.log("Adding 8 more data results");
this.busy = true;
axios.get("http://features.domain_server.com/mobileapi/eggsrate/1/0").then(response => {
const append = response.data.slice(
this.posts.length,
this.posts.length + this.limit
);
this.posts = this.posts.concat(append);
this.busy = false;
});
},
},
created() {
this.loadMore();
}
});
AOS.init();<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Egg Rates</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css'>
<link rel='stylesheet' href='https://unpkg.com/aos@next/dist/aos.css'>
</head>
<body>
<!-- partial:index.partial.html -->
<section class="section">
<div id="app">
<ul>
<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="limit">
<li v-for="post in posts" style="margin-bottom: 2rem;" data-aos="slide-up" data-aos-offset="100" data-aos-easing="ease-out-back">
<div class="card">
<header class="card-header">
<p class="card-header-title">
{{post.id}}
</p>
</header>
<div class="card-content">
<div class="content">
<p>{{post.name}}</p>
<p>{{post.cities}}</p>
</div>
</div>
</div>
</li>
</div>
</ul>
</div>
</section>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.8/vue.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js'></script>
<script src='https://unpkg.com/aos@next/dist/aos.js'></script>
<script src='https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f0868585dd999e96999e998495dd8293829f9c9cb0c2dec0dec2">[email protected]</a>/vue-infinite-scroll.js'></script>
<script src="./script.js"></script>
</body>
</html>