Laravel 8 and Vue 3 with axios - paginate - laravel

Question

I m using Laravel 8 and Vue 3 with axios. Is this https://www.npmjs.com/package/laravel-vue-pagination laravel vue pagination working with these versions of laravel and vue?
has someone used it?
THX.

Answer 1

here is simple pagination in vue js, this is my example form my codes
data(){
return {
current: 1,
pageSize: 4,
matchingJobs: {},
}
},
computed: {
indexStart() {
return (this.current - 1) * this.pageSize;
},
indexEnd() {
return this.indexStart + this.pageSize;
},
paginated() {
return this.matchingJobs.slice(this.indexStart, this.indexEnd);
}
},
methods: {
prev() {
this.current--;
},
next() {
this.current++;
}
getJobs(){
axios.get('/jobs').then(response => {
this.matchingjobs = response.data
}).catch(errors => {
console.log(errors)
})
},
},
created(){
this.getJobs()
}
sett current: 1 and pageSize:whatever number of items you want to be use computed to manipulate response data from your api. I am not good in explaining but I hope those codes are understandable then this should be in your html
<div v-if="matchingJobs.length">
<div class="row">
<div v-for="(job, index) in paginated" :key="index.id" class="col-xs-6 col-sm-4 col-md-3 col-lg-3 border-light mb-3">
<SingleJob :job="job" />
</div>
</div>
<!-- PAGINATION START -->
<div class="col-12 mt-4 pt-2">
<ul class="pagination justify-content-center mb-0">
<li class="page-item"><a class="page-link" #click="prev" aria-label="Previous">Prev</a></li>
<li class="page-item active"><a class="page-link" href="javascript:void(0)">{{ current }}</a></li>
<li class="page-item"><a class="page-link" #click="next()" aria-label="Next">Next</a></li>
</ul>
</div><!--end col-->
<!-- PAGINATION END -->
I hope this will be helpful