Cannot paginate news-api to different pages in Vue.js2

Question

I'm trying to create a simple pagination functionality in my Vue component for the newsapi.org API.

My initial call to the API in the created hook is working just as expected but I am struggling to navigate to different pages.

I am aware that there are other reusable pagination component's out there including vuetify which I am using in my project, but my needs are really simple so i decided to create it manually myself within my component which just has two buttons for navigating to the next and previous pages with another display button in the middle displaying the current page number.

This is my Vuetify code 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>

This is my code to fetch the results and also my functions for changing the pages...

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();
    },

I have set my page size to 9 so I get 9 results per page and this 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'm not sure if I need to somehow use my pageCount to achieve what I want. Thanks in advance for any help.

Renaud Renaud · Accepted Answer · 2019-07-21T00:24:16

apiUrl needs to be a computed property.

data() {
  return {
    currentPage: 1
    maxPerPage: 9,
    totalResults: 0,
  }
},
computed: {
  pageCount() {
    return Math.ceil(this.totalResults / this.maxPerPage);
  },
  isFirstPage() {
    return this.currentPage === 1
  },
  isLastPage() {
    return this.currentPage >= this.pageCount
  },
  apiUrl() {
    return `https://newsapi.org/v2/everything?q=real-madrid&language=en&page=${this.currentPage}&pageSize=${this.maxPerPage}&apiKey=5b***********8f4aa3d63cf050b2`
  },
}
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() {
      if (this.isLastPage) return
      this.currentPage += 1;
      this.fetchNews();
    },
    prev() {
      if (this.isFirstPage) return
      this.currentPage -= 1;
      this.fetchNews();
    },
},

Cannot paginate news-api to different pages in Vue.js2

1 Answers