ProjectMemberSelect.vue

<template>
  <div class="field">
    <Dropdown
      :options="projectMemberOptions"
      :selected="selectedProjectUser ? selectedProjectUser.name : ''"
      :selection.sync="selectedProjectUser"
      :search="true"
      :clearable="true"
    />
  </div>
</template>

<script>
import Dropdown from '@/components/Dropdown.vue';
import { formatUserOption } from '@/utils';
import { mapState } from 'vuex';

export default {
  name: 'ProjectMemberSelect',
    
  components: {
    Dropdown,
  },

  props: {
    selectedUserId: {
      type: Number,
      default: null,
    }
  },

  computed: {
    ...mapState('projects', [
      'projectUsers'
    ]),
    projectMemberOptions: function () {
      return this.projectUsers
        .filter((el) => el.level.codename !== 'logged_user') // Filter out user not member of the project (with level lower than contributor)
        .map((el) => formatUserOption(el.user)); // Format user data to fit dropdown option structure
    },
    selectedProjectUser: {
      // getter
      get() {
        return this.projectMemberOptions.find(el => el.value === this.selectedUserId);
      },
      // setter
      set(newValue) {
        this.$emit('update:user', newValue.value);
      },
    }
  },

  created() {
    this.$store.dispatch('projects/GET_PROJECT_USERS', this.$route.params.slug);
  },
};
</script>