在 vue js 中单击时更新两个分页组件

Question

我在一页中有两个分页组件。一个在顶部，另一个在底部，这样用户就可以使用分页，而无需向下滚动。

问题是当我从顶部组件单击第 2 页时，分页工作正常，但底部组件仍将当前页面显示为 1。底部组件也会发生同样的情况。更改不会同时在两个组件中发生。

我想要实现的是，当我从顶部组件中选择第 2 页时，底部组件也应该将当前页面标记为第 2 页，反之亦然。

你能告诉我如何解决这个问题吗？

我的代码如下所示。你可以在这里看到它：https://jsfiddle.net/c9wp2k63/107/

我使用的分页组件是：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;
        }
    }
});

Answer 1

我不确定这是否是最好的方法，但我得到了它的工作:) https://jsfiddle.net/c9wp2k63/144/

new Vue({
  el: "#app",
  components: {
    Pagination
  },
  data: {
    page: 1,
  },
  methods: {
    setPageFirst: function(page) {
        const IsNewPage =  this.page != page
      this.page = page;

      if ( IsNewPage ){
                this.$refs.secondPagination.setPage(page)
      }
    },
    setPageSecond: function(page) {
        const IsNewPage =  this.page != page

      this.page = page;
      if ( IsNewPage ){
         this.$refs.firstPagination.setPage(page)
       }
    }
  }
});

Answer 2

通过检查 lib 的代码（[1]、[2]），我看到的唯一方法是使用 refs 获取组件的句柄，然后对它们调用 Pagination.setPage(page)。

需要注意的是Pagination.setPage(page) 会再次触发paginate event，因此您必须添加if 以防止堆栈溢出错误。

Here's your JSFiddle, updated.

细分：

将ref="topPagination" 和ref="bottomPagination" 添加到模板中：

<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" ref="topPagination">
  </pagination>

  <h3>
  Bottom Pagination
  </h3>
   <pagination :records="10000" :per-page="100" @paginate="setPage" ref="bottomPagination">
  </pagination>
</div>

添加if和$refs...setPage()：

new Vue({
  el: "#app",
  components: {
    Pagination
  },
  data: {
    page: 1
  },
  methods: {
    setPage: function(page) {
      if (page === this.page) { /* prevent stack overflow */ return; }
      this.page = page;
      this.$refs.bottomPagination.setPage(page);
      this.$refs.topPagination.setPage(page);
    }
  }
});