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

<template>
  <div class="vue-component">
     <h2><a name="section-30"></a>{{ $t('social_issue.title') }}</h2>
     
     <div class="my-4">
        <!--label for="selectIssues">{{ $t('social_issue.label') }}</label-->
        <VueMultiselect
            name="selectIssues"
            v-model="selected"
            track-by="id"
            label="text"
            :placeholder="$t('social_issue.label')"
            :multiple="true"
            :searchable="true"
            :close-on-select="false"
            :allow-empty="true" 
            :show-labels="false" 
            :options="options">
        </VueMultiselect>
     </div>
     
  </div>
</template>

<script>
import VueMultiselect from 'vue-multiselect'
import { getSocialIssues } from '../api'

export default {
   name: "SocialIssue",
   components: { VueMultiselect },
   data () {
      return {
         selected: null,
         options: []
      }
   },
   computed: {
   },
   mounted() {
      this.getOptions();
   },
   methods: {
      getOptions() {
         getSocialIssues().then(socialIssues => new Promise((resolve, reject) => {
            console.log('socialIssues', socialIssues);
            this.options = socialIssues.results; 
            resolve();
         })).catch(error => this.$store.commit('catchError', error));        
      },
   }
}
</script>

<style src="vue-multiselect/dist/vue-multiselect.css"></style>
<style lang="scss" scoped>
   div.vue-component > div {
      //margin: 3em;
   }
</style>