exchange-2.0/resources/assets/vue/components/bookings/forms/UpdateBookingComponent.vue

<template>
    <div class="row">
        <div class="col-auto" v-show="!isLoading">
            <button id="cancel-new-booking" name="cancel-new-booking" class="btn btn-lg btn-default bg-master-lightest b-rad-none all-caps fs-12" data-dismiss="modal" @click="cancelUpdateBooking()">Cancel</button>
        </div>
        <div class="col text-right" v-show="!isLoading && this.data.bankAccount">
            <button id="confirm-new-booking" name="confirm-new-booking" class="btn btn-lg btn-success b-rad-none all-caps fs-12" v-if="Object.keys(data.bankAccount).length" @click="submitForm()">Update Recipient</button>
        </div>
    </div>
</template>

<script>
    import ModalFormHandler from '../../../general/mixins/modalFormHandler';
    export default {
        data(){
            return {
                parameters: {},
                isLoading: false,
            }
        },
        methods: {
            submitForm(){
                this.isLoading = true;
                this.parameters = {
                    transferable_bank_id: this.data.bankAccount.id,
                };
                this.submit(route('api.booking.update.recipient', this.data.bookingId), 'put', this.section, true, true);
            },
            successHandler(response){
                this.isLoading = false;
                this.$emit('updatedBooking', this.data.bankAccount);
                this.formHandler();
                this.closeModal();
            },
            cancelUpdateBooking(){
                this.$emit('updateBookingCanceled');
            }
        },
        mixins: [ModalFormHandler]
    }
</script>