I'm currently working on a Vue Component code that involves pagination for a list. The pagination seems to be working fine, except for the issue I encounter when trying to navigate to the next page, which in this case is page 2. I've added a console log statement and noticed that the method isn't being triggered at all.
Here's my code snippet, can you spot any errors in it?
<ul class="movements-list framed half-bottom-space">
<li class="list-head">
<p>Test</p>
<p>Test2</p>
<p>Test3<small>Test4</small></p>
</li>
<li v-for="item in getItems">
<p>{{item}}</p>
<p>{{item}}</p>
<p class="minus">{{item}} <small>{{item}}</small></p>
</li>
</ul>
<paginate :page-count="getPageCount"
:page-range="3"
:margin-pages="2"
:click-handler="clickCallback"
:prev-text="'＜'"
:next-text="'＞'"
:container-class="'pagination'"
:page-class="'page-item'">
</paginate>
<script>
export default {
name: "cenas-component",
data: () => ({
items: ["Saab", "Volvo", "BMW", "BMW", "BMW", "BMW", "BMW", "BMW", "BMW", "BMW", "BMW", "BMW"],
parPage: 5,
currentPage: 1
}),
methods: {
clickCallback: function (pageNum) {
console.log('im here in clickCallback')
console.log(pageNum)
this.currentPage = Number(pageNum);
},
},
computed: {
getItems: function () {
let current = this.currentPage * this.parPage;
let start = current - this.parPage;
return this.items.slice(start, current);
},
getPageCount: function () {
console.log('getPageCount')
return Math.ceil(this.items.length / this.parPage);
}
}
}
</script>
When attempting to click on the next pagination number, nothing happens and the page remains stuck on page 1 without any change. Despite adding a Console.log to the clickCallback method, the log doesn't show up.
Can anyone identify a problem within the code? Thank you!