MembersPanel.vue

<template>
  <b-tab title="Members">
    <div v-if="model.membersPanel !== null">
      <b-list-group v-for="member in model.membersPanel.items" id="members-list">
        <b-list-group-item href="#">
          {{member.label}}
          <span v-if="model.permission === 'ADMIN'">
            <a href="#" v-on:click="changeMemberPermission(member)">
              <font-awesome-icon icon="edit"></font-awesome-icon>
            </a>
            <a href="#" v-on:click="deleteMember(member)">
              <font-awesome-icon icon="trash"></font-awesome-icon>
            </a>
          </span>
        </b-list-group-item>
      </b-list-group>
    </div>
    <div class="text-center" v-if="model.membersPanel !== null">
      <b-pagination
        v-model="model.membersPanel.paginator.page"
        :total-rows="model.membersPanel.paginator.totalItems"
        :per-page="model.membersPanel.paginator.pageSize"
        aria-controls="members-list"
        align="center"
        v-on:change="setPage"
      ></b-pagination>
    </div>
  </b-tab>
</template>

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

export default {
  name: 'MembersPanel',
  computed: mapState({
    model: state => state.model,
  }),
  methods: {
    deleteMember: function(member) {
      console.log('deleteMember ' + member.id);
    },
    changeMemberPermission: function(member) {
      console.log('changeMemberPermission ' + member.id);
    },
    setPage: function(page) {
      console.log('setPage ', page);
    }
  }
}
</script>