ConfirmRemovePermissionModal.vue

<template>
  <b-modal id="confirm-remove-permission-modal" title="Confirm action" ok-title="Remove" @ok="removePermission" ok-variant="danger">
    <p v-if="user">Are you sure that you want to remove the permission for the user {{user.displayName}}?</p>
  </b-modal>
</template>

<script>
import client from 'api-client';
import { mapState, mapActions } from 'vuex';

export default {
  name: 'ConfirmRemovePermissionModal',
  data: function() {
    return {
      user: null
    }
  },
  computed: mapState({
    model: state => state.model
  }),
  methods: {
    openRemovePermissionModal: function(user) {
      this.user = user;
      this.$bvModal.show('confirm-remove-permission-modal');
    },
    removePermission: function(event) {
      // Prevent modal from closing
      event.preventDefault();

      client.removePermission(this.user.id, this.$store.state.input)
        .then(res => {
          this.$store.commit('updatePermissionsPanel', res);
          this.$bvModal.hide('confirm-remove-permission-modal');
        });
    }
  }
}
</script>