exchange-2.0/resources/assets/vue/components/address/forms/AddressFormComponent.vue

<template>
    <div class="row p-t-25 text-left">
        <div class="col">
            <div class="row">
                <div class="col">
                    <div class="row m-b-15">
                        <div class="col-6 p-r-5">
                            <validation-wrapper-component selecatable :validator="$v.parameters.district_id">
                                <label>District</label>
                                <selectable-component :endpoint="route('api.address.district.list')" section="districtListSection" valueColumn="id" :labelColumn="['city']" v-model="parameters.district_id"></selectable-component>
                            </validation-wrapper-component>
                        </div>
                        <div class="col-4 p-l-5">
                            <validation-wrapper-component :validator="$v.parameters.post_code">
                                <label>Post Code</label>
                                <input class="form-control" name="post_code" v-model="parameters.post_code">
                            </validation-wrapper-component>
                        </div>
                    </div>
                    <div class="row m-b-15">
                        <div class="col">
                            <validation-wrapper-component :validator="$v.parameters.street_one">
                                <label>Address Line 1</label>
                                <input class="form-control" name="street_one" v-model="parameters.street_one">
                            </validation-wrapper-component>
                        </div>
                    </div>
                    <div class="row m-b-15">
                        <div class="col">
                            <validation-wrapper-component :validator="$v.parameters.street_two">
                                <label>Address Line 2</label>
                                <input class="form-control" name="street_two" v-model="parameters.street_two">
                            </validation-wrapper-component>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col">
                    <div class="row">
                        <div class="col text-right">
                            <button type="button" class="btn btn-sm btn-success b-rad-none" @click="submitForm()">{{(this.type==3)?"Update":"Create"}} Billing Address</button>
                            <button v-show="this.type==3" type="button" class="btn btn-sm bg-master-lighter b-rad-none m-l-5" @click="closeForm()">Cancel</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import { required } from "vuelidate/lib/validators";
    export default {
        props: {
            id: {
                type: Number,
                required: true
            },
            type: {
                //Npte: type 1 = create, type 2 = update set default, type 3 = update address
                type: Number,
                default: 1
            },
            addressData: {
                type: Object,
                default() {
                    return {}
                },
                required:false
            },
        },
        watch: {
            'id': function() {
                this.parameters.company_id = this.id;
            },
            'addressData': function() {
                this.resetForm();
                this.parameters = {
                    company_id: this.id,
                    street_one:  this.addressData.street_one,
                    street_two: this.addressData.street_two,
                    district_id: this.addressData.district.id,
                    post_code: this.addressData.post_code,
                }
            }
        },
        data() {
			return {
                parameters : {
                    company_id: this.id,
                    street_one:  '',
                    street_two: '',
                    district_id: '',
                    post_code: '',
				}

			}
		},
        validations: {
            parameters: {
                street_one: { required },
                street_two: {},
                district_id: { required },
                post_code: { required },
            }
        },
        methods:{
            submitForm(){
                if(this.type==3){
                    this.submit((this.route('api.address.update',this.addressData.id)), 'put', 'bookingDetailSection', true, true)
                }else {
                    this.submit((this.route('api.address.create')), 'post', 'bookingDetailSection', true, true)
                }
            },
            closeForm(){
                this.$root.$emit('updateAddressForm', {}, false);
            },
            successHandler(response){
                if(this.type==3){
                    this.closeForm();
                    this.$store.dispatch('reloadList', {'name': "addresslist"});
                }else {
                    this.type !== 2 ? this.$emit('updateDefaultAddress', response.payload.data) : this.$emit('createdAddress', response.payload.data);
                    this.resetForm();
                }
            }
        }
    }
</script>