chill-bundles/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/Create.vue

<template>
   <ul class="nav nav-tabs">
      <li class="nav-item">
         <a class="nav-link" :class="{ active: isActive('person') }">
            <label for="person">
               <input type="radio" name="person" id="person" v-model="radioType" value="person">
               {{ $t('onthefly.create.person') }}
            </label>
         </a>
      </li>
      <li class="nav-item">
         <a class="nav-link" :class="{ active: isActive('thirdparty') }">
            <label for="thirdparty">
               <input type="radio" name="thirdparty" id="thirdparty" v-model="radioType" value="thirdparty">
               {{ $t('onthefly.create.thirdparty') }}
            </label>
         </a>
      </li>
   </ul>

   <div class="my-4">
      <on-the-fly-person
         v-if="type === 'person'"
         v-bind:action="action"
         ref="castPerson"
      >
      </on-the-fly-person>

      <on-the-fly-thirdparty
         v-if="type === 'thirdparty'"
         v-bind:action="action"
         ref="castThirdparty"
      >
      </on-the-fly-thirdparty>
   </div>
</template>

<script>
import OnTheFlyPerson from 'ChillPersonAssets/vuejs/_components/OnTheFly/Person.vue';
import OnTheFlyThirdparty from 'ChillThirdPartyAssets/vuejs/_components/OnTheFly/ThirdParty.vue';
import { postPerson } from "ChillPersonAssets/vuejs/_api/OnTheFly";

export default {
   name: "OnTheFlyCreate",
   props: ['action'],
   components: {
      OnTheFlyPerson,
      OnTheFlyThirdparty
   },
   data() {
      return {
         type: 'person' //by default
      }
   },
   computed: {
      radioType: {
         set(type) {
            this.type = type;
            console.log('## type:', type, ', action:', this.action);
         },
         get() {
            return this.type;
         }
      }
   },
   methods: {
      isActive(tab) {
         return (this.type === tab) ? true : false;
      },
      castDataByType() {
         switch (this.radioType) {
            case 'person':
               return this.$refs.castPerson.$data.person;
            case 'thirdparty':
               let data = this.$refs.castThirdparty.$data.thirdparty;
               data.name = data.text;
               data.address = { id: data.address.address_id }
               return data;
            default:
               throw Error('Invalid type of entity')
         }
      }
   }
}
</script>

<style lang="css" scoped>
label {
   cursor: pointer;
}
</style>