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

<template>
    <teleport to="#location">
        <div class="mb-3 row">
            <label class="col-form-label col-sm-4">
                {{ $t('activity.location') }}
            </label>
            <div class="col-sm-8">

                <VueMultiselect
                    name="selectLocation"
                    id="selectLocation"
                    label="name"
                    track-by="id"
                    open-direction="top"
                    :multiple="false"
                    :searchable="true"
                    :placeholder="$t('activity.choose_location')"
                    :custom-label="customLabel"
                    :options="locations"
                    v-model="location">
                </VueMultiselect>

                <new-location v-bind:locations="locations"></new-location>
            </div>
        </div>
    </teleport>
</template>

<script>
import { mapState } from "vuex";
import VueMultiselect from 'vue-multiselect';
import NewLocation from './Location/NewLocation.vue';
import { getLocations } from '../api.js';

export default {
    name: "Location",
    components: {
        NewLocation,
        VueMultiselect
    },
    data() {
        return {
            locations: []
        }
    },
    computed: {
        ...mapState(['activity']),
        location: {
            get() {
                return this.activity.location;
            },
            set(value) {
                this.$store.dispatch('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.locationType.title.fr} ${value.name}`;
        }
    }
}

</script>