ConfirmRemoveGroupModal.vue

<template>
  <b-modal id="confirm-remove-group-modal" title="Confirm action" ok-title="Delete" @ok="removeGroup" ok-variant="danger">
    <p v-if="groupToRemove">Are you sure that you want to delete the group <strong>{{groupToRemove.groupName}}</strong>?</p>
  </b-modal>
</template>

<script>
import client from 'api-client';

export default {
  name: 'ConfirmRemoveGroupModal',
  data: function() {
    return {
      groupToRemove: null
    }
  },
  methods: {
    openRemoveGroupModal: function(group) {
      this.groupToRemove = group;
      this.$bvModal.show('confirm-remove-group-modal');
    },
    removeGroup: function(event) {
      // Prevent modal from closing
      event.preventDefault();

      client.removeGroup(this.groupToRemove.groupId, this.$store.state.input)
        .then(res => {
          this.$store.commit('updateGroupsPanel', res);
          this.$bvModal.hide('confirm-remove-group-modal');
        })
    }
  }
}
</script>