vee-validate多父组件、子组件、子孙组件校验问题

Question

<template>
    <div>
        <basic-info v-if="pBasicInfoVO.isShow"></basic-info>
        <sku-info v-if="pSkuInfoListVO.isShow"></sku-info>
        <delivery-info v-if="pDeliveryInfoVO.isShow"></delivery-info>
        <ware-house v-if="pWarehouseInfoVO.isShow"></ware-house>
        <description-info v-if="pDescriptionsInfoVO.isShow"></description-info>
        <account-info v-if="pManAccountVO.isShow"></account-info>
        <ordiary-info v-if="pOrdinaryAttrInfoVO.isShow"></ordiary-info>
        <business-relate v-if="pBusinessRelateInfoVO.isShow"></business-relate>
        <div class="footer">
            <a href="javascript:;" class="btn btn-success" @click="saveWarePublishVO">Save</a>
            <a href="javascript:;" class="btn btn-cancel">Cancel</a>
        </div>
    </div>
</template>

有以上导航页面，点击save的时候，取反isValidate：

saveWarePublishVO() {
        this.setIsValidate(!this.isValidate)
        let isBasicInfoVOValid = this.basicInfoVO.validateFlag
        let isSkuInfoVOValid = this.skuInfoListVO.validateFlag
    
        this.$store.dispatch(type.SAVE_WARE_INFO)
    }
 

然后每个组件监听isValidate字段,设置各个模块的有效标志位：

watch: {
    isValidate() {
        this.$validator.validateAll().then((flag) => {
            if (!isRepeate && flag) {
                this.setBasicInfoValidateFlag(flag)
            }
        })
    }
}

但是由于vee-validate方法中的validateAll是异步执行的，点击save的时候是同步执行的，导致第一次点击save不会触发watch,请问如何解决这个问题？

Answer 1

你可以在save的时候，校验成功再去做后续的操作，为啥要监听一个属性呢

Answer 2

就是去保存是时候异步校验去了，校验未完成就保存去了。你回答的是啥晕