[Vuejs]-Await for event from child component Vuejs

by

0👍

You can disable “Save Changes” button for click event at parent component until finishing up checking duplication at child component. if you check duplication from network call, you should use asynchronous javascript paradigm.

parent

<template>
   <b-btn @click="updateCustomer">Save Changes :disabled="isSaveBtnDisabled"</b-btn>
   <display-pr @duplicateValue="valueDuplicate"></display-pr>
   <child-component @checkDuplicates="changeSaveBtnStatus"></child-component>
</template>

<script>
    data: () => {
        isSaveBtnDisabled: false
    },
    methods: {
        changeSaveBtnStatus: (event) => {
            this.isSaveBtnDisabled = event;
        }
    }
</script>

Child

updateCustomerName: () => {
        this.$emit('checkDuplicates', true);
        /*
         * Here is code statements the checking duplicates and enable save button by calling
         * this.$emit('checkDuplicates', false);
         *
         */
        this.$emit('checkDuplicates', false);
       if(duplicate){
            this.$emit('duplicateValue',duplicateValue);
       }
       else {/***post ***/}
    }

Leave a comment