title: VUE and Pagination : pag.component loose values after pager is changed/clicked
body: <p>I am implementing a pager in my VUE app, and at first load, everything works fine.. The parameters needed for the pager-component is sat correctly, and the pager displays as it should..</p>
  
  <p>Problem is.. when i <em>navigate</em> (use/click) the pager, all props are sat to Undefined and presents me one evil : </p>
  
  <pre><code>[Vue warn]: Invalid prop: type check failed for prop "currentPage". Expected Number, got Undefined.
  </code></pre>
  
  <p>When i use the VUE debugger in Chrome i notice : </p>
  
  <p><a href="https://i.stack.imgur.com/vnB96.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vnB96.png" alt="enter image description here"></a></p>
  
  <p><strong>My thoughts :</strong> </p>
  
  <ol>
  <li>Must be something wrong with passing prop values to the pager</li>
  <li>Pager is instancified before the values are sat ? </li>
  </ol>
  
  <p><strong>Snippet for Home.VUE component :</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import * as types from '../store/mutationtypes'
  import { mapGetters, mapActions } from 'vuex'
  import Pagination from './Pagination.vue'
  import Modal from './Modal.vue'
  
  var moment = require('moment')
  
  export default {
      name: 'Home',
      data() {
          return {
              FiltersVisible: false,
              orderList: {
                  currentPage: 1,
                  totalPages: this.$store.state.ordersCount / 10,
                  // totalPages:5,
                  itemsPerPage: 10
              },
              showModal: false,
              searchString: ''
          }
      },
      computed: {
          ...mapGetters(['orders', 'ordersCount']),
          totalPages() {
              return this.ordersCount / 10
          }
          // ...mapGetters(['orders'])
      },
  
      methods: {
          ...mapActions(['getOrders']),
          init() {
              var queryParams = null;
              this.getOrders(queryParams)
          },
          doSearch: function() {
              var queryParams = {
                  searchString: this.searchString
              }
              this.getOrders(queryParams)
          },
          viewOrder: function(order) {
              this.$router.push('/vieworder/' + order._source.orderid)
          },
          viewAppInfo: function(order) {
              this.$router.push('/viewappinfo/' + order._source.mobileinstanceid)
          },
          humanDate: function(dateToFormat) {
              return moment(dateToFormat).format("DD.MM.YYYY [kl: ] hh:mm")
          },
          orderListChanged(pageNum) {
              this.orderList.currentPage = pageNum;
              var queryParams = {
                  skip: (pageNum * this.orderList.itemsPerPage) - this.orderList.itemsPerPage,
                  take: this.orderList.itemsPerPage
              };
              this.orderList = this.getOrders(queryParams)
          },
          toggleModal: function(actionName, orderItem) {
              var modalParams = {
                  modalComponent: actionName,
                  selectedOrderItem: orderItem,
                  userProfileId: null
              }
              this.$store.dispatch('switchModalComponent', {
                  modalParams: modalParams
              })
              this.showModal = true;
          },
      },
      watch: {
          'ordersCount': function(val) {
              if (val) {
                  this.orderList.totalPages = val / 10
              }
          },
          route: function() {
              this.init()
              console.log("Orderscount er = " + ordersCount)
              console.log(this)
          }
      },
      created() {
          this.init()
      },
      components: {
          'modal': Modal,
          'Pagination': Pagination
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
      &lt;div class="col-sm-12"&gt;
        .....Order data looped through and presented here....
  
      &lt;h1&gt;This is page {{ orderList.currentPage }}&lt;/h1&gt;
  
      &lt;pagination :current-page="orderList.currentPage" :total- pages="orderList.totalPages" :items-per-page="orderList.itemsPerPage" @page-changed="orderListChanged"&gt;
      &lt;/pagination&gt;
  
  
      &lt;/div&gt;
  &lt;/template&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Snippet for Pagination.VUE</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import Util from './services/Util'
  
  export default {
    props: {
      currentPage: {
        type: Number,
        required: true
      },
      totalPages: Number,
      itemsPerPage: Number,
      totalItems: Number,
      visiblePages: {
        type: Number,
        default: 5,
        coerce: (val) =&gt; parseInt(val)
      }
    },
  
    methods: {
      activePage(pageNum) {
        return this.currentPage === pageNum ? 'active' : ''
      },
      pageChanged(pageNum) {
        this.$emit('page-changed', pageNum)
      }
    },
  
    computed: {
      lastPage() {
        if (this.totalPages) {
          return this.totalPages
        } else {
          return this.totalItems % this.itemsPerPage === 0 ?
            this.totalItems / this.itemsPerPage :
            Math.floor(this.totalItems / this.itemsPerPage) + 1
        }
      },
      paginationRange() {
        let start = this.currentPage - this.visiblePages / 2 &lt;= 0 ?
          1 : this.currentPage + this.visiblePages / 2 &gt; this.lastPage ?
          Util.lowerBound(this.lastPage - this.visiblePages + 1, 1) :
          Math.ceil(this.currentPage - this.visiblePages / 2)
        let range = []
        for (let i = 0; i &lt; this.visiblePages &amp;&amp; i &lt; this.lastPage; i++) {
          range.push(start + i)
        }
        return range
      }
    }
  
  }
  
  Util.JS
  
  lowerBound (num, limit) {
        return num &gt;= limit ? num : limit
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
      &lt;ul class="pagination"&gt;
          &lt;li&gt;
              &lt;a href="#" @click.prevent="pageChanged(1)" aria-label="Previous"&gt;
                  &lt;span aria-hidden="true"&gt;&amp;laquo;&lt;/span&gt;
              &lt;/a&gt;
          &lt;/li&gt;
          &lt;li v-for="n in paginationRange" :class="activePage(n)"&gt;
              &lt;a href="#" @click.prevent="pageChanged(n)"&gt;{{ n }}&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
              &lt;a href="#" @click.prevent="pageChanged(lastPage)" aria-label="Next"&gt;
                  &lt;span aria-hidden="true"&gt;&amp;raquo;&lt;/span&gt;
              &lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/template&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Updated 05.10 - Order before paging :</strong> 
  <a href="https://i.stack.imgur.com/S3JOd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/S3JOd.png" alt="enter image description here"></a></p>
  
  <p><strong>Updated 05.10 - Order after paging</strong>
  <a href="https://i.stack.imgur.com/6eMQC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6eMQC.png" alt="enter image description here"></a></p>