get options and display selected

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

@@ -3,19 +3,22 @@
      <h2><a name="section-30"></a>{{ $t('social_issue.title') }}</h2>
      
      <div class="my-4">
-        <!--label for="selectIssues">{{ $t('social_issue.label') }}</label-->
+        <!--label for="selectIssues">{{ $t('social_issue.label') }}</label
+        name="selectIssues"
+        -->
         <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">
+           :close-on-select="false"
+           :allow-empty="true" 
+           :show-labels="false" 
+           track-by="id"
+           label="text"
+           :multiple="true"
+           :searchable="false"
+           :placeholder="$t('social_issue.label')"
+           @update:model-value="updateSocialIssues"
+           :model-value="value"
+           :options="options"
+           >
         </VueMultiselect>
      </div>
      
@@ -23,31 +26,31 @@
 </template>
 
 <script>
-import VueMultiselect from 'vue-multiselect'
-import { getSocialIssues } from '../api'
+import VueMultiselect from 'vue-multiselect';
+import { getSocialIssues } from '../api';
+import { mapState, mapActions } from 'vuex';
 
 export default {
    name: "SocialIssue",
    components: { VueMultiselect },
-   data () {
-      return {
-         selected: null,
-         options: []
-      }
-   },
    computed: {
+      ...mapState({
+         value: state => state.accompanyingCourse.socialIssues,
+         options: state => state.socialIssueOptions,
+      })
    },
    mounted() {
       this.getOptions();
    },
    methods: {
       getOptions() {
-         getSocialIssues().then(socialIssues => new Promise((resolve, reject) => {
-            console.log('socialIssues', socialIssues);
-            this.options = socialIssues.results; 
+         getSocialIssues().then(elements => new Promise((resolve, reject) => {
+            console.log('get socialIssues', elements.results);
+            this.$store.commit('setSocialIssueOptions', elements.results); 
             resolve();
          })).catch(error => this.$store.commit('catchError', error));        
       },
+      ...mapActions(['updateSocialIssues'])
    }
 }
 </script>