I am currently working on implementing a basic pagination feature in my Vue component specifically for the newsapi.org API.
While my initial API call in the created hook is functioning as expected, I am encountering difficulties navigating to different pages.
Although I am aware of existing reusable pagination components like Vuetify which I am incorporating in my project, I opted to manually create a simple pagination system within my component. This includes two buttons for moving to the next and previous pages, along with a button in the middle displaying the current page number.
Below is the Vuetify code snippet for the pagination...
<div class="text-xs-center">
<v-btn fab small dark color="teal" :disabled="disabled" @click.prevent="prev()">
<v-icon dark>mdi-chevron-left</v-icon>
</v-btn>
<v-btn outline fab class="title" color="white">{{ this.currentPage }}</v-btn>
<v-btn fab small dark color="teal" @click.prevent="next()">
<v-icon dark>mdi-chevron-right</v-icon>
</v-btn>
</div>
Additionally, here is my code for fetching results and managing page changes...
computed: {
pageCount() {
return Math.ceil(this.totalResults / this.maxPerPage);
},
created() {
this.fetchNews();
},
methods: {
fetchNews() {
axios
.get(this.apiUrl)
.then(res => {
this.articles = res.data.articles;
this.totalResults = res.data.totalResults;
console.log(res.data);
})
.catch(err => {
console.log(err);
});
},
next() {
this.currentPage += 1;
this.fetchNews();
},
prev() {
this.currentPage -= 1;
this.fetchNews();
},
To retrieve 9 results per page, I have set the page size to 9. The following is how I constructed the apiUrl...
apiUrl: `https://newsapi.org/v2/everything?q=real-madrid&language=en&page=${this.currentPage}&pageSize=9&apiKey=5b***********8f4aa3d63cf050b2`,
I am unsure whether I need to leverage the pageCount variable to accomplish my goal. Any advice or assistance would be greatly appreciated.