Vue Pagination 2

Vue Pagination 2 Demo

by Mantaya Fishaimer

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.rawgit.com/matfish2/vue-pagination-2/controlled-component/dist/vue-pagination-2.min.js"></script>
<div id="app" v-cloak>
  <h2><a target="_blank" href="https://www.npmjs.com/package/vue-pagination-2">Vue Pagination 2</a></h2>
  <p>Selected page: {{page}}</p>
  <pagination :records="10000" v-model="page" :per-page="100" @paginate="callback">
  </pagination>
</div>

CSS

#app {
  text-align: center;
}

[v-cloak] {
  display: none;
}

JavaScript

new Vue({
  el: "#app",
  components: {
    Pagination
  },
  data: {
    page: 45
  },
  methods: {
    callback: function(page) {
      console.log(`Page ${page} was selected. Do something about it`);
    }
  }
});