pagination logic almost complete - active and inactive elements next - page gap not working

app/assets/javascripts/vue_pipelines_index/pipelines.vue.js.es6

@@ -17,7 +17,7 @@
         pipelines: [],
         currentPage: '',
         intervalId: '',
-        pageNum: 1,
+        pagenum: 1,
       };
     },
     props: [
@@ -27,19 +27,19 @@
     ],
     created() {
       const url = window.location.toString();
-      if (~url.indexOf('?')) this.pageNum = url.split('?')[1].split('=')[1];
-      this.store.fetchDataLoop.call(this, Vue, this.pageNum);
+      if (~url.indexOf('?')) this.pagenum = url.split('?')[1].split('=')[1];
+      this.store.fetchDataLoop.call(this, Vue, this.pagenum);
     },
     methods: {
       shortsha(pipeline) {
         return pipeline.sha.slice(0, 8);
       },
       changepage(event) {
-        this.pageNum = +event.target.innerText;
+        this.pagenum = +event.target.innerText;
         // use p instead of page to avoid rails tyring to make an actual request
-        window.history.pushState({}, null, `?p=${this.pageNum}`);
+        window.history.pushState({}, null, `?p=${this.pagenum}`);
         clearInterval(this.intervalId);
-        this.store.fetchDataLoop.call(this, Vue, this.pageNum);
+        this.store.fetchDataLoop.call(this, Vue, this.pagenum);
       },
       pipelineurl(id) {
         return `pipelines/${id}`;
@@ -77,6 +77,7 @@
           </table>
         </div>
         <vue-gl-pagination
+          :pagenum='pagenum'
           :changepage='changepage'
           :pages='pipelines.length'
           :count='count'

app/assets/javascripts/vue_pipelines_index/vue_gl_pagination.vue.js.es6

@@ -3,55 +3,61 @@
 
 ((gl) => {
   gl.VueGlPagination = Vue.extend({
+    data() {
+      return {
+        last: Math.ceil(+this.count / 5),
+      };
+    },
     props: [
       'changepage',
       'pages',
       'count',
+      'pagenum',
     ],
+    methods: {
+      pagenumberstatus(n) {
+        if (n - 1 === +this.pagenum) return 'page active';
+        return '';
+      },
+    },
     computed: {
       lastpage() {
-        const lastPage = Math.ceil(+this.count / 5);
-        return `pipelines?page=${lastPage}`;
+        return `pipelines?p=${this.last}`;
+      },
+      upcount() {
+        return +this.last + 1;
+      },
+      prev() {
+        if (this.pagenum === 1) return 1;
+        return this.pagenum - 1;
+      },
+      next() {
+        if (this.pagenum === this.last) return `pipelines?p=${this.pagenum}`;
+        return `pipelines?p=${this.pagenum + 1}`;
       },
     },
     template: `
       <div class="gl-pagination">
-        <ul class="pagination clearfix">
-          <li class="prev disabled">
+        <ul
+          class="pagination clearfix"
+          v-for='n in upcount'
+        >
+          <li class="prev disabled" v-if='n === 1'>
             <span>Prev</span>
           </li>
-          <li class="page active">
-            <a @click='changepage($event)'>1</a>
-          </li>
-          <li class="page">
-            <a
-              rel="next"
-              @click='changepage($event)'
-            >
-              2
-            </a>
-          </li>
-          <li class="page">
-            <a @click='changepage($event)'>3</a>
-          </li>
-          <li class="page">
-            <a @click='changepage($event)'>4</a>
-          </li>
-          <li class="page">
-            <a @click='changepage($event)'>5</a>
-          </li>
-          <li class="page">
-            <span class="page gap">…</span>
+          <li :class='pagenumberstatus(n)' v-else>
+            <a @click='changepage($event)'>{{(n - 1)}}</a>
           </li>
-          <li class="next">
-            <a
-              rel="next"
-              href="pipelines?page=2"
-            >
-              Next
-            </a>
+          <!--
+            still working on this bit
+            <li class="page" v-if='n === upcount - 1'>
+              <span class="page gap">…</span>
+            </li>
+          -->
+          <li class="next" v-if='n === upcount'>
+            <a rel="next" :href='next'>Next</a>
           </li>
-          <li class="last">
+          <li class="last" v-if='n === upcount'>
             <a :href='lastpage'>Last »</a>
           </li>
         </ul>