vuejs-paginate-vue-router-rute

by kabanoki

HTML

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css">
<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
    <a href="">test</a>
    <h2>page {{currentPage}}</h2>
    <input type="text" v-model="select" placeholder="ID search">
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>ID</th>
          <th>Title</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in getLists">
          <td>{{item.id}}</td>
          <td>{{item.title}}</td>
        </tr>
      </tbody>
    </table>
    <paginate
      v-model="currentPage"
      :page-count="getPageCount"
      :initial-page="4"
      :page-range="3"
      :margin-pages="2"
      :click-handler="clickCallback"
      :prev-text="'＜'"
      :next-text="'＞'"
      :container-class="'pagination'"
      :page-class="'page-item'">
  </paginate>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/index.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-router.js"></script>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

th {
  font-weight: bold;
}

Vue

var items = [];

for(var i=1; i<=105; i++){
  items.push({
    id: i,
    title: 'item-'+i
  });
}

Vue.component('paginate', VuejsPaginate);

const router = new VueRouter({
  routes: [{
    path: '/pages/:page',
    name: 'page' 
  }]
});

new Vue({
  router,
  data: {
    select: '',
    items: items,
    parPage: 10,
    currentPage: 1
  },
  mounted: function(){
    this.currentPage = this.$route.params.page || 1;
  },
  methods: {
    clickCallback: function () {
      this.$router.push({ name: 'page', params: { page: this.currentPage }})
    }
  },
  computed: {
    getItems: function() {
      let self = this;
      return this.items.filter(function(item){
        return String(item.id).indexOf(self.select) !== -1;
      })
    },
    getLists: function(){
      let current = this.currentPage * this.parPage;
      let start = current - this.parPage;

      return this.getItems.slice(start, current);
    },
    getPageCount: function() {
      return Math.ceil(this.getItems.length / this.parPage);
    }
  },
  watch:{
    select: function(){
      this.currentPage = 1;
      this.clickCallback;
    }
  }
}).$mount('#app')