Paginator.vue

<template>
<div class="row mt-4" v-if="paginatedPanel !== null && paginatedPanel.totalItems > 0">
  <div class="col-md-8">
    <b-pagination v-model="paginatedPanel.currentPage" :total-rows="paginatedPanel.totalItems" :per-page="paginatedPanel.pageSize" aria-controls="groups-list" align="center" v-on:change="setPage"></b-pagination>
    <p>Total items: {{paginatedPanel.totalItems}}</p>
  </div>
  <div class="col-md-4">
    <b-row>
      <b-col sm="5">
        <label for="page-size">Page size:</label>
      </b-col>
      <b-col sm="6">
        <b-form-select id="page-size" v-model="paginatorInput.paginatorPageSize" :options="pageSizeOptions" v-on:change="changePageSize"></b-form-select>
      </b-col>
    </b-row>
  </div>
</div>
</template>

<script>
import {
  mapState
} from 'vuex';

export default {
  name: 'Paginator',
  props: {
    paginatedPanel: Object,
    onUpdate: Function,
    paginatorInput: Object
  },
  /*computed: mapState({
    input: state => state.input
  }),*/
  data: function() {
    return {
      pageSizeOptions: [{
          value: 5,
          text: "5"
        },
        {
          value: 20,
          text: "20"
        },
        {
          value: 50,
          text: "50"
        },
        {
          value: 100,
          text: "100"
        }
      ]
    };
  },
  methods: {
    setPage: function(page) {
      this.paginatorInput.paginatorPage = page;
      this.onUpdate();
    },
    changePageSize: function(pageSize) {
      this.paginatorInput.paginatorPageSize = pageSize;
      this.onUpdate();
    }
  }
}
</script>