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>