How to add pagination in api driven vue app? - vue.js

Question

I have a get api that looks like this -
this.$API +"api/v1/puzzles/getAll?page=" + this.pageNo +"&limit=" + this.pageLimit,
It accepts two params page and limit. How to make pagination for this get api ?
My html code:
<md-card>
<md-card-header data-background-color="green">
<h4 class="title">List of Puzzles</h4>
<p class="category">The list of puzzles you have uploaded</p>
</md-card-header>
<md-card-content class="justify-content-center">
<table>
<thead>
<tr>
<th><b>Puzzle Question</b></th>
<th><b>Option 1</b></th>
<th><b>Option 2</b></th>
<th><b>Option 3</b></th>
<th><b>Option 4</b></th>
<th><b>Correct Answer</b></th>
<th><b>Action</b></th>
</tr>
</thead>
<tbody>
<tr v-for="(data, index) in puzzleList.puzzles" :key="index">
<td class="q-img"><img :src="data.qImage" alt="" /></td>
<td
class="ans-img"
v-for="(collection, index) in data.qOptions"
:key="index"
>
<img :src="collection.oImage" alt="" />
</td>
<td style="padding-left: 32px">
<h2>{{ data.qAnswer }}</h2>
</td>
<router-link to="/editPuzzle"
><td style="padding-top: 70px">
<button class="btn btn-success">Edit</button>
</td></router-link
>
<td>
<button
v-on:click="deletePuzzle(data.id)"
class="btn btn-danger"
>
Delete
</button>
</td>
</tr>
</tbody>
<!-- <pagination v-model="pageNo" :pageLimit="500" #paginate="myCallback"/> -->
</table>
</md-card-content>
</md-card>
data() {
return {
siteURL: this.$axios.defaults.siteURL,
puzzleList: [],
pageNo: 1,
pageLimit: 4,
token: localStorage.getItem("_token"),
puzzleId: "",
};
},
I tried to use third-party packages but couldnt make it work. I have taken 2 variables inside return above like pageNo: 1 and pageLimit: 4 and haven't found any solution anywhere with this type of api. Please show me detaily, how should I implement this ?
Update:
<table>
<thead>
<tr>
<th><b>Puzzle Question</b></th>
<th><b>Option 1</b></th>
<th><b>Option 2</b></th>
<th><b>Option 3</b></th>
<th><b>Option 4</b></th>
<th><b>Correct Answer</b></th>
<th><b>Action</b></th>
</tr>
</thead>
<tbody>
<tr v-for="(data, index) in puzzleList.puzzles" :key="index">
<td class="q-img"><img :src="data.qImage" alt="" /></td>
<td
class="ans-img"
v-for="(collection, index) in data.qOptions"
:key="index"
>
<img :src="collection.oImage" alt="" />
</td>
<td style="padding-left: 32px">
<h2>{{ data.qAnswer }}</h2>
</td>
<router-link to="/editPuzzle"
><td style="padding-top: 70px">
<button class="btn btn-success">Edit</button>
</td></router-link
>
<td>
<button
v-on:click="deletePuzzle(data.id)"
class="btn btn-danger"
>
Delete
</button>
</td>
</tr>
<pagination
v-model="pageNo"
:pageLimit="4"
#paginate="myCallback"
/>
</tbody>
</table>
methods:{
myCallback(e) {
this.pageNo = e;
this.getPuzzle();
},
getPuzzle: function () {
this.$axios
.get(
this.$API +
"api/v1/puzzles/getAll?page=" +
this.pageNo +
"&limit=" +
this.pageLimit,
{
headers: {
Authorization: "Bearer " + this.token,
},
}
)
.then((res) => {
this.puzzleList = res.data.data;
this.puzzleId = res.data.data.puzzles[0].id;
console.log(this.puzzleId);
});
},

Answer 1

any third-party of pagination api has the property that you should set the current page and the limit or total, the main of pagination is that current page,page size, total and the callback of current page changes, the lifecycle is that:
init: you fetch the api with the params(currentpage, pagesize) to get data, then according to your response ,you can get the total count of your data
use the 1 step response like total count, and give it to your pagination component
don't forget to declare your onChange callback ,which the pagination component necessary to use, in the callback ,you just change the current page which user click and fetch your api again to get the new data.