Ожидание события от дочернего компонента Vuejs

Question

У меня есть дочерний и родительский компонент. Поток таков: в родительском я имею «Сохранить изменения» -> у меня есть один метод, который обновляет его -> также в дочернем, у меня есть метод для обновления части компонента, но если у меня есть дублирующее значение, сначала выдается обновление от родителя и после этого я получил ошибку от Child и хочу дождаться ответа от child, пока я не обновлю родительский компонент.

Parent:

<b-btn @click="updateCustomer">Save Changes</b-btn>
<display-pr @duplicateValue="valueDuplicate"></display-pr>

    updateCustomer() {
        if(this.duplicateValue){
           //error message
        }else{
            //do something
        }
    }
    valueDuplicate(duplicateValue) {
        this.duplicateValue = duplicateValue;
    },

Ребенок

updateCustomerName(){
   //find if I have duplicate and if I have let duplicate=  true;
   if(duplicate){
        this.$emit('duplicateValue',duplicateValue);
   }
   else {
        //post
    }
}

Answer 1

Вы можете отключить кнопку «Сохранить изменения» для события щелчка в родительском компоненте до завершения проверки дублирования в дочернем компоненте. если вы проверяете дублирование при сетевом вызове, вы должны использовать асинхронную javascript парадигму.

родительский

<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>

дочерний

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 ***/}
    }