chill-bundles/src/Bundle/ChillMainBundle/Resources/public/vuejs/Address/App.vue

<template>

   <div v-for="error in displayErrors" class="alert alert-danger my-2">
      {{ error }}
   </div>

   <add-address
      v-bind:key="context.entity.type"
      v-bind:context="context"
      v-bind:options="addAddress.options"
      v-bind:result="addAddress.result"
      @submitAddress="submitAddress"
      ref="addAddress">
   </add-address>
</template>

<script>
/*
*  Address component is a uniq component for many contexts.
*  Allow to create/attach/edit an address to
*  - a person (new or edit address),
*  - a household (move or edit address)
*
* */
import AddAddress from './components/AddAddress.vue';

export default {
   name: "App",
   components: {
      AddAddress
   },
   data() {
      return {
         context: {
            edit: window.mode === 'edit',
            entity: {
               type: window.entityType,
               id: window.entityId
            },
            addressId: window.addressId | null,
            backUrl: window.backUrl,
         },
         addAddress: {
            options: {

               /// Options override default.
               /// null value take default component value defined in AddAddress data()
               button: {
                  text:  {
                     create: window.buttonText || null,
                     edit: window.buttonText || null
                  },
                  size: window.buttonSize || null,
                  displayText: window.buttonDisplayText   //boolean, default: true
               },

               /// Modal title text if create or edit address (trans chain, see i18n)
               title: {
                  create: window.modalTitle || null,
                  edit: window.modalTitle || null
               },

               /// Display each step in page or Modal
               bindModal: {
                  step1: window.binModalStep1,  //boolean, default: true
                  step2: window.binModalStep2   //boolean, default: true
               }
            }
         }
      }
   },
   methods: {
      displayErrors() {
         return this.$refs.addAddress.errorMsg;
      },
      submitAddress() {
         console.log('@@@ click on Submit Address Button');

         // Cast child method
         this.$refs.addAddress.submitNewAddress();
         // it fetch post request only for person and household
         // else get returned payload then dispatch from here (parent)
      }
   }
}
</script>