vue.js - 如何在 vuejs-paginate 中手动设置 pageCount？

Question

我的 HTML:

<paginate
        :pageCount="max"
        :containerClass="'pagination'"
        :clickHandler="redirectToPage"
        :force-page="selectedPage">
</paginate>

ma​​x 是 vuex 的 getter。当 paginate 正在加载 max = undefined 时，所以我需要在更改 max 值后设置 pageCount。

在官方文档中只有静态值:

Answer 1

考虑到 Belmin Bedak 的评论，这里它使用 v-if 使其等待 pageCount 加载.在测试中，我发现更新 pageCount 会按预期工作:可用页数已更新。

vm = new Vue({
  el: '#app',
  data: {
    max: null
  },
  components: {
    paginate: VuejsPaginate
  },
  methods: {
    clickCallback: function(page) {
      console.log(page);
    }
  },
  mounted() {
    // Pretend we're getting from vuex
    setTimeout(() => {
      this.max = 7;
    }, 1000);
  }
});

<link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<script src="https://unpkg.com/vuejs-paginate@0.8.0"></script>
<div id="app">
    <paginate v-if="max"
      :page-count="max"
      :container-class="'pagination'"
      :click-handler="clickCallback">
    </paginate>
    <div v-else>
    Loading...
    </div>
</div>