flaschengeist-frontend/src/plugins/user/components/UserSelector.vue

<template>
  <q-select
    filled
    :label="label"
    @input="updated"
    :value="user"
    :options="users"
    option-label="display_name"
    option-value="userid"
    map-options
  />
</template>

<script lang="ts">
import { computed, defineComponent, onBeforeMount } from '@vue/composition-api';
import { Store } from 'vuex';
import { StateInterface } from 'src/store';

interface Props {
  user: FG.User;
  label: string;
}

export default defineComponent({
  name: 'UserSelector',
  props: { user: { required: true }, label: { type: String, default: 'Benutzer' } },
  setup(props: Props, { root, emit }) {
    const store = <Store<StateInterface>>root.$store;

    onBeforeMount(() => {
      store.dispatch('user/getUsers').catch((error) => {
        console.error(error);
      });
    });

    const users = computed(() => store.state.user.users);
    const updated = (value: FG.User) => {
      emit('update:user', value);
    };

    return {
      updated,
      users,
    };
  },
});
</script>