MembersPanel.vue

<template>
  <b-tab title="Members" v-if="model.membersPanel !== null">
    <b-list-group v-for="member in model.membersPanel.members" 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 class="text-center">
      <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>