SearchUser.vue

<template>
<b-form inline>
  <label class="w-25" for="user-input">Search:</label>
  <b-form-input v-model="searchInput" id="user-input" class="w-75 mb-2" aria-describedby="user-input-feedback" v-on:input="searchUser" placeholder="User">
  </b-form-input>
  <label class="w-25" for="user-input" v-if="users.length > 0">Selected user:</label>
  <b-form-select v-model="selectedUser" :options="users" class="w-75" v-if="users.length > 0"></b-form-select>
  <div class="w-25"></div>
  <b-form-group label="Permission:" v-if="users.length > 0 && model.permission === 'ADMIN'" class="w-75 mt-3">
    <b-form-radio-group id="permission-radio-group" v-model="permission">
      <b-form-radio value="ADMIN">Admin</b-form-radio>
      <b-form-radio value="MANAGE_MEMBERS">Manage members</b-form-radio>
      <b-form-radio value="VIEW_MEMBERS">View members</b-form-radio>
    </b-form-radio-group>
  </b-form-group>
</b-form>
</template>

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

export default {
  name: 'SearchUser',
  computed: mapState({
    model: state => state.model,
  }),
  data: function() {
    return {
      searchInput: null,
      users: [],
      selectedUser: null,
      permission: 'VIEW_MEMBERS'
    }
  },
  methods: {
    searchUser: function() {
      client.searchUser(this.searchInput)
        .then(res => {
          // empty users array
          this.users.splice(0, this.users.length);
          // fill users array
          for (let i = 0; i < res.length; i++) {
            let user = res[i];
            this.users.push({
              value: user.id,
              text: user.displayName
            });
          }
          if (this.users.length > 0) {
            this.selectedUser = this.users[0].value;
          }
        });
    }
  }
};
</script>