Having two pagination components on a single page is convenient for users to navigate without scrolling too much. One component is placed at the top and the other at the bottom.
The issue arises when I switch to page 2 using the top component, as the bottom component still shows the current page as 1. The same inconsistency occurs when using the bottom component. Changes made in one component are not reflected in the other simultaneously.
I aim to synchronize both components so that selecting page 2 on the top component automatically updates the bottom component to display page 2 as well, and vice versa.
Could you please provide guidance on how to resolve this inconsistency?
Here is a snippet of my code with a live preview available here: https://jsfiddle.net/c9wp2k63/107/
The pagination component utilized is: https://github.com/matfish2/vue-pagination-2
<div id="app">
<h2>Vue Pagination 2</h2>
<p>Selected page: {{page}}</p>
<h3>Top Pagination</h3>
<pagination :records="10000" :per-page="100" @paginate="setPage">
</pagination>
<h3>Bottom Pagination</h3>
<pagination :records="10000" :per-page="100" @paginate="setPage">
</pagination>
</div>
new Vue({
el: "#app",
components: {
Pagination
},
data: {
page: 1
},
methods: {
setPage: function(page) {
this.page = page;
}
}
});