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

从检查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);
    }
  }
});

Answer 2

我不确定这是否是最好的方法，但我得到了它的工作:) 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)
       }
    }
  }
});

点击vue js更新两个分页组件

2 个答案:

故障：