Search code examples
javascriptvue.jspagination

Vue paginate component only loads one page

My paginate component does not seem to be working properly and only displays the first page despite the number of total objects I want to display:

enter image description here

Paginate component:

<paginate v-if="searchResults.length >0" class="m-2">
        :page-count="getPageCount"
        :page-range="3"
        :margin-pages="1"
        :click-handler="clickCallback"
        :prev-text="'Prev'"
        :next-text="'Next'"
        :container-class="'pagination'"
        :page-class="'page-item'"
        :active-class="'currentPage'">
      </paginate>

Javascript:

data() {
    return {
      searchTerm: '',
      searchResults: [],
      perPage:3,
      currentPage: 1
    };
  },
  components: {
    paginate: VuejsPaginateNext,
  },
  computed: {
    // Returns the data according to the page number
    getItems:function() {
      let current = this.currentPage * this.perPage;
      let start = current - this.perPage;
      return this.searchResults.slice(start, current);
    },
    // Returns total number of pages required according to the total rows of data
    getPageCount:function() {
      return Math.ceil(this.searchResults.length / this.perPage);
    }
  },
  methods: {
    clickCallback: function(pageNum) {
      this.currentPage = Number(pageNum);
    },
    search(searchTerm) {
      const lowerCaseTerm = searchTerm.toLowerCase();
      const searchWords = lowerCaseTerm.split(/\s+/); // Splitting by whitespace
      const query = searchWords.join('+');
      const url = `https://openlibrary.org/search.json?title=${query}`;

      fetch(url)
        .then(response => {
          if (!response.ok) {
            throw new Error('Network response was not ok');
          }
          return response.json();
        })
        .then(data => {
          this.searchResults = data.docs; // Assuming the API returns an array of results in 'docs'
        })
        .catch(error => {
          console.error('Error fetching search results:', error);
        });
    }
  }

I've tried logging the result of getPageCount() to my console as well and it seems to be calculating the right value. Any suggestions as to what could be the problem? I'm also getting a warning that says I'm missing the pageCount prop even though its there: enter image description here

Solution

  • It was a syntax error... there's a closing tag after class="m-2" that shouldn't be there