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

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

      <div class="mb-4">
         <label for="selectOrigin">
            {{ $t('origin.label') }}
         </label>

         <VueMultiselect
            name="selectOrigin"
            label="text"
            :custom-label="transText"
            track-by="id"
            :multiple="false"
            :searchable="true"
            :placeholder="$t('origin.placeholder')"
            v-model="value"
            :options="options"
            @select="updateOrigin">
         </VueMultiselect>

      </div>
   </div>
</template>

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

export default {
   name: 'OriginDemand',
   components: { VueMultiselect },
   data() {
      return {
         options: []
      }
   },
   computed: {
      ...mapState({
         value: state => state.accompanyingCourse.origin,
      }),
   },
   mounted() {
      this.getOptions();
   },
   methods: {
      getOptions() {
         getListOrigins().then(response => new Promise((resolve, reject) => {
            this.options = response.results;
            resolve();
         }));
      },
      updateOrigin(value) {
         console.log('value', value);
         this.$store.dispatch('updateOrigin', value);
      },
      transText ({ text }) {
         const parsedText = JSON.parse(text);
         return parsedText.fr;
      },
   }
}
</script>

<style src="vue-multiselect/dist/vue-multiselect.css"></style>
<style lang="css" scoped>
   label {
      display: none;
   }
</style>