There seems to be an issue with my paginate component as it is only displaying the first page despite the total number of objects I want to show:
https://i.sstatic.net/rEonp8Rk.png
Pagination Component Code:
<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 Code:
data() {
return {
searchTerm: '',
searchResults: [],
perPage: 3,
currentPage: 1
};
},
components: {
paginate: VuejsPaginateNext,
},
computed: {
// Returns data based on current 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 needed according to total data rows
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+/);
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;
})
.catch(error => {
console.error('Error fetching search results:', error);
});
}
}
I have checked the result of getPageCount() in my console and it appears to be calculating the correct value. Can you provide any suggestions on what might be causing the issue? I am also receiving a warning about a missing pageCount prop despite it being present: https://i.sstatic.net/DaJ6UI74.png