adding an API GET Location endpoint, fetch locations and list them in vue multiselect

src/Bundle/ChillActivityBundle/Resources/public/vuejs/Activity/components/Location.vue

@@ -5,11 +5,19 @@
                 Localisation
             </label>
             <div class="col-sm-8">
-                <!--
+
                 <VueMultiselect
-                    name="chooseLocation"
-                    placeholder="Choisissez une localisation">
+                    name="selectLocation"
+                    track-by="id"
+                    :multiple="false"
+                    :searchable="true"
+                    placeholder="Choisissez une localisation"
+                    label="name"
+                    :custom-label="customLabel"
+                    v-model="location"
+                    :options="locations">
                 </VueMultiselect>
+                <!--
                 -->
                 <new-location></new-location>
             </div>
@@ -18,9 +26,10 @@
 </template>
 
 <script>
-import {mapState} from "vuex";
+import { mapState } from "vuex";
 import VueMultiselect from 'vue-multiselect';
 import NewLocation from './Location/NewLocation.vue';
+import { getLocations } from '../api.js';
 
 export default {
     name: "Location",
@@ -28,10 +37,36 @@ export default {
         NewLocation,
         VueMultiselect
     },
+    data() {
+        return {
+            locations: []
+        }
+    },
     computed: {
         ...mapState(['activity']),
+        location: {
+            get() {
+                return this.activity.location;
+            },
+            set(value) {
+                this.$store.commit('updateLocation', value);
+            }
+        }
+    },
+    mounted() {
+        this.getLocationsList();
     },
     methods: {
+        getLocationsList() {
+            getLocations().then(response => new Promise(resolve => {
+                console.log('getLocations', response);
+                this.locations = response.results;
+                resolve();
+            }))
+        },
+        customLabel(value) {
+            return `${value.type.title.fr} ${value.name}`;
+        }
     }
 }
 </script>