exchange-2.0/resources/assets/vue/components/address/elements/AddressComponent.vue

<template>
	<div class="row m-l-0 m-r-0 m-b-10 parentContainer">
        <div class="col-auto">
            <div class="row h-100 align-items-center justify-content-center bg-master-lighter hint-text">
                <div class="col p-r-20 p-l-20">
                    <i class="fa fa-map-marker muted hint-text fs-16"></i>
                </div>
            </div>
        </div>
		<div class="col bg-white">
			<div class="row align-items-center justify-content-center p-t-10 p-b-10">
				<div class="col">
                    <div class="row">
                        <div class="col">
                            <span class="fs-10 muted">{{address.street_one}} {{address.street_two}} {{address.city}} {{address.state.name}} {{address.post_code}} {{address.country.name}}</span>
                        </div>
                    </div>
				</div>
				<div class="col-auto b-l b-grey">
					<div class="row h-100">
						<div class="col">
							<div class="row no-margin">
                                <div class="col-auto text-right p-t-10 p-b-10 bg-master-lightest m-r-5 ml-auto"  @click="deleteAddress(address.id)">
                                    <a class="requestModal pointer" data-type="delete">
                                        <div data-toggle="tooltip" title="" data-placement="bottom" class="row link align-items-center justify-content-center" data-original-title="Delete">
                                            <div class="col">
                                                <i class="fa fa-times text-danger"></i>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                                <div class="col-auto text-right p-t-10 p-b-10 bg-master-lightest" @click="updateAddress(address.id)">
                                    <a class="pointer">
                                        <div data-toggle="tooltip" title="" data-placement="bottom" class="row link align-items-center justify-content-center" data-original-title="Delete">
                                            <div class="col">
                                                <i class="fa fa-pencil text-info"></i>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
						</div>
					</div>
				</div>
			</div>
		</div>
        <div class="col-4 m-l-15 d-flex align-items-center">
            <div class="row align-items-center" :class="[{'requestModal': !address.billing}, {'pointer': !address.billing}, {'link': !address.billing}]" data-type="setDefault" @click="!address.billing ? setDefaultAddress() : null">
                <div class="col-auto text-right p-t-5 p-b-5" :class="[{'bg-warning-lighter': address.billing}, {'bg-master-light': !address.billing}]">
                    <div data-toggle="tooltip" class="row align-items-center justify-content-center" :class="{'link': !address.billing}">
                        <div class="col">
                            <i class="fa fa-star" :class="[{'text-warning': address.billing}, {'text-master': !address.billing}]"></i>
                        </div>
                    </div>
                </div>
                <div class="col bg-white p-t-5 p-b-5">
                    <small class="fs-12 all-caps bold" :class="[{'text-warning': address.billing}, {'text-master': !address.billing}]">Default Address</small>
                </div>
            </div>
        </div>


	</div>
</template>

<script>
    import FormHandler from '../../../general/mixins/formHandler';

    export default {
        props: {
            'data': {
                type: Object,
                required: true
            },
        },
        data() {
            return {
                address: this.data
            }
        },
        watch: {
            'data': function() {
                this.address = this.data;
            }
        },
        methods: {
            setDefaultAddress(){
                this.submit(route('api.address.default',this.address.id), 'put', this.section, true, true);
            },
            updateAddress(id){
                this.$root.$emit('updateAddressForm', this.address, true);
            },
            deleteAddress(id){
                this.$root.$emit('deleteAddressConfirm', id);
            },
            successHandler(){
                this.$store.dispatch('reloadList', {'name': "addresslist"});
            }
        },
        mixins: [FormHandler]
    }
</script>