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="input.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
  },
  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.input.paginatorPage = page;
      this.onUpdate();
    },
    changePageSize: function(pageSize) {
      this.input.paginatorPageSize = pageSize;
      this.onUpdate();
    }
  }
}
</script>