chill-bundles/src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/CourseLocation.vue

<template>
   <div class="vue-component">
      <h2><a name="section-50"></a>
         {{ $t('courselocation.title') }}
      </h2>
      <div class="my-4">

         <!-- {# include vue_address component #} -->
         <div v-for="error in displayErrors" class="alert alert-danger my-2">
            {{ error }}
         </div>

         <div v-if="accompanyingCourse.location"
              class="chill-entity entity-address">
            <div class="address multiline">
               <p class="street">{{ accompanyingCourse.location.street }}
                  <span class="streetnumber">{{ accompanyingCourse.location.streetNumber }}</span>
               </p>
               <p class="postcode">
                  <span class="code">{{ accompanyingCourse.location.postcode.code }}</span>
                  <span class="name">{{ accompanyingCourse.location.postcode.name }}</span>
               </p>
               <p class="country">{{ accompanyingCourse.location.country.name.fr }}</p>
            </div>
         </div>

         <ul class="record_actions">
            <li>
               <add-address
                  v-bind:context="context"
                  v-bind:key="addAddress.type"
                  v-bind:options="addAddress.options"
                  v-bind:result="addAddress.result"
                  ref="addAddress">
               </add-address>
            </li>
         </ul>

      </div>
   </div>
</template>

<script>
import { mapState } from "vuex";
import AddAddress from 'ChillMainAssets/vuejs/Address/components/AddAddress.vue';

export default {
   name: "CourseLocation",
   components: {
      AddAddress
   },
   data() {
      return {
         addAddress: {
            options: {

               /// Options override default.
               /// null value take default component value
               button: {
                  text:  {
                     create: 'courselocation.add_temporary_address',
                     edit: 'courselocation.edit_temporary_address'
                  },
               },
               title: {
                  create: 'courselocation.add_temporary_address',
                  edit: 'courselocation.edit_temporary_address'
               },
               /// Display each step in page or Modal
               bindModal: {
                  //step1: false, step2: false
               },
               // Options only for root parent component
               displayResult: true,
               redirectToBackUrl: false
            },
            type: 'accompanying_course_location',
            result: null // <== returned from addAddress component
         }
      }
   },
   computed: {
      ...mapState({
         accompanyingCourse: state => state.accompanyingCourse,
         context: state => state.addressContext
      })
   },
   methods: {
      initAddressContext() {
         let ac = {
            entity: {
               type: this.accompanyingCourse.type,
               id: this.accompanyingCourse.id
            },
            edit: false,
            addressId: null,
            backUrl: null
         }
         this.$store.commit('setAddressContext', ac);
      },
      displayErrors() {
         return this.$refs.addAddress.errorMsg;
      }
   },
   mounted() {
      this.initAddressContext();
      console.log('ac.locationStatus', this.accompanyingCourse.locationStatus);
      console.log('ac.location (temporary location)', this.accompanyingCourse.location);
      console.log('ac.personLocation', this.accompanyingCourse.personLocation);
   }
}
</script>