chill-bundles/src/Bundle/ChillPersonBundle/Resources/public/vuejs/HouseholdAddress/components/SelectHouseholdAddress.vue

<template>
   <div class="container">
      <VueMultiselect
         v-model="value"
         @select="selectAddress"
         name="field"
         track-by="id"
         label="value"
         :custom-label="transName"
         :multiple="false"
         :placeholder="$t('select_address')"
         :options="addresses">
      </VueMultiselect>
   </div>
</template>

<script>
import VueMultiselect from 'vue-multiselect';

export default {
   name: 'SelectHouseholdAddress',
   components: { VueMultiselect },
   props: ['address'],
   data() {
      return {
         value: null
      }
   },
   computed: {
      addresses() {
         return this.address.loaded.addresses;
      }
   },
   methods: {
      transName(value) {
         return `${value.text} ${value.postcode.name}`
      },
      selectAddress(value) {
         this.address.selected.address = value;
      }
   }
};
</script>

<style src="vue-multiselect/dist/vue-multiselect.css"></style>