I want to make a pagination page on my page and I use pagination for laravel and pass the data to my vue template. It has a previous and next page to toggle it. In the first page, the previous button is disabled and when it reaches the last page, the next page is disabled.
While my previous page works fine but when it reaches the last page, clicking next will bring me to page 1 again.
Articles.vue:
<template>
<div>
<h2>Article</h2>
<nav aria-label="Page navigation">
<ul class="pagination">
<li v-bind:class="[{disabled : !pagination.prev_page_url}]" v-on:click="fetchArticles(pagination.prev_page_url)" class="page-item"><a class="page-link" href="#">Previous</a></li>
<li v-bind:class="[{disabled : !pagination.next_page_url}]" v-on:click="fetchArticles(pagination.next_page_url)" class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
<div class="card card-body mb-2" v-for="article in articles" :key="article.id">
<h3>{{article.title}}</h3>
<p>{{article.body}}</p>
</div>
</div>
</template>
<script>
export default {
data(){
return {
articles:[],
article:{
id:'',
title:'',
body:''
},
article_id:'',
pagination:{},
edit:false
}
},
created(){
this.fetchArticles();
},
methods:{
fetchArticles(page_url){
let vm = this;
page_url = page_url || '/api/articles'
fetch(page_url).
then(res => res.json()).
then(res => {
this.articles = res.data;
vm.makePagination(res.meta,res.links);
//console.log(this.articles);
}).
catch(err => console.log(err));
},
makePagination(meta,links){
let pagination = {
current_page : meta.current_page,
last_page : meta.last_page,
next_page_url : links.next,
prev_page_url : links.prev
}
this.pagination = pagination;
console.log(this.pagination);
}
}
}
</script>
The disabled (grey highlight) does show but I can still click next and proceed with it. Any idea what did I miss?