title: VueJs how to make pagination with limiter and range..?
body: <p>I have code like this : <br></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var demoList = new Vue({
    el: '#demoList',
    data: {
      items: [{
        "id": 1,
        "name": "Tom"
      }, {
        "id": 2,
        "name": "Kate"
      }, {
        "id": 3,
        "name": "Jack"
      }, {
        "id": 4,
        "name": "Jill"
      }, {
        "id": 5,
        "name": "aa"
      }, {
        "id": 6,
        "name": "bb"
      }, {
        "id": 7,
        "name": "cc"
      }, {
        "id": 8,
        "name": "dd"
      }, {
        "id": 1,
        "name": "Tom"
      }, {
        "id": 2,
        "name": "Kate"
      }, {
        "id": 3,
        "name": "Jack"
      }, {
        "id": 4,
        "name": "Jill"
      }, {
        "id": 5,
        "name": "aa"
      }, {
        "id": 6,
        "name": "bb"
      }, {
        "id": 7,
        "name": "cc"
      }, {
        "id": 8,
        "name": "dd"
      }, ],
      loading: false,
      order: 1,
      searchText: null,
      ccn: null,
      currentPage: 0,
      itemsPerPage: 2,
      resultCount: 0
    },
    computed: {
      totalPages: function() {
        console.log(Math.ceil(this.resultCount / this.itemsPerPage) + "totalPages");
        return Math.ceil(this.resultCount / this.itemsPerPage);
  
      }
    },
    methods: {
      setPage: function(pageNumber) {
        this.currentPage = pageNumber;
        console.log(pageNumber);
      }
    },
    filters: {
      paginate: function(list) {
        this.resultCount = this.items.length;
        console.log(this.resultCount + " Result count");
        console.log(this.currentPage + " current page");
        console.log(this.itemsPerPage + " items per page");
        console.log(this.totalPages + " Total pages 2");
        if (this.currentPage &gt;= this.totalPages) {
          this.currentPage = Math.max(0, this.totalPages - 1);
        }
        var index = this.currentPage * this.itemsPerPage;
        console.log(index + " index");
        console.log(this.items.slice(index, index + this.itemsPerPage));
        return this.items.slice(index, index + this.itemsPerPage);
      }
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>a {
    color: #999;
  }
  .current {
    color: red;
  }
  ul {
    padding: 0;
    list-style-type: none;
  }
  li {
    display: inline;
    margin: 5px 5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"&gt;&lt;/script&gt;
  &lt;div id="demoList"&gt;
    &lt;div class="containerTable"&gt;
      &lt;table class="table"&gt;
        &lt;thead&gt;
          &lt;tr class="header"&gt;
            &lt;th&gt;
              &lt;div&gt;&lt;a @click="sortvia('provider_name')"&gt;Provider&lt;/a&gt;
              &lt;/div&gt;
            &lt;/th&gt;
          &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
          &lt;tr v-for="item in items | paginate"&gt;
            &lt;td&gt;{{item.name}}&lt;/td&gt;
          &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
    &lt;/div&gt;
    &lt;ul&gt;
      &lt;li v-for="pageNumber in totalPages"&gt;
        &lt;a href="#" @click="setPage(pageNumber)"&gt;{{ pageNumber+1 }}&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Im stuck trying to create a pager with vuejs, so I was wonder if anyone can appoint an example of how to make a pager like this if is possible "1-2-3-4-5 ... 55" ??, thanks again for any help.</p>