chill-bundles/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/Referrer.vue

<template>
<div class="vue-component">
   <h2><a id="section-70"></a>{{ $t('referrer.title') }}</h2>

   <div>
      <label class="col-form-label" for="selectReferrer">
         {{ $t('referrer.label') }}
      </label>

      <VueMultiselect
         name="selectReferrer"
         label="text"
         track-by="id"
         v-bind:multiple="false"
         v-bind:searchable="true"
         v-bind:placeholder="$t('referrer.placeholder')"
         v-model="value"
         v-bind:options="referrersAvailable"
         @select="updateReferrer">
      </VueMultiselect>
   </div>

   <div>
      <ul class="record_actions">
         <li>
            <button
               class="btn btn-create"
               type="button"
               name="button"
               @click="assignMe">
               {{ $t('referrer.assign_me') }}
            </button>
         </li>
      </ul>
   </div>

</div>
</template>

<script>
import VueMultiselect from 'vue-multiselect';
import { getUsers, whoami } from '../api';
import { mapState } from 'vuex';

export default {
   name: "Referrer",
   components: { VueMultiselect },
   computed: {
      ...mapState({
         value: state => state.accompanyingCourse.user,
         referrersAvailable: state => state.referrersAvailable,
      }),
   },
   methods: {
      updateReferrer(value) {
         //console.log('value', value);
         this.$store.dispatch('updateReferrer', value);
      },
      assignMe() {
         //console.log('assign me');
         whoami().then(me => new Promise((resolve, reject) => {
            this.$store.dispatch('updateReferrer', me);
            resolve();
         }));
      }
   }
}
</script>

<style src="vue-multiselect/dist/vue-multiselect.css"></style>