AddMemberModal.vue

<template>
<b-modal id="add-member-modal" title="Add member" ok-title="Add" @shown="afterShow" @ok="addMember" size="lg">
  <SearchUser ref="searchUser" @searchUserEnter="addMember" />
</b-modal>
</template>

<script>
import client from 'api-client';
import SearchUser from './SearchUser.vue'

export default {
  name: 'AddMemberModal',
  components: {
    SearchUser
  },
  methods: {
    afterShow: function() {
      this.$refs.searchUser.$refs.userInput.focus();
    },
    addMember: function(event) {
      // Prevent modal from closing
      if (event) {
        event.preventDefault();
      }

      let userId = this.$refs.searchUser.selectedUser;
      let permission = this.$refs.searchUser.permission;

      if (!userId || !permission) {
        return;
      }

      client.addMember(userId, permission, this.$store.state.input)
        .then(res => {
          this.$store.commit('updateMembersPanel', res);
          this.$bvModal.hide('add-member-modal');
        });
    }
  }
};
</script>