VueJS - 运行事件成功发出后的代码

Question

在包含输入的表单数据的事件已成功从子组件传递到父组件后，我正在尝试清除子组件中的表单。但是，我注意到表单在数据通过事件传播到父组件之前被清除，这样事件就将空值传递给父组件。我尝试使用超时延迟 clearForm()，但没有帮助。有没有办法修改行为，使 clearForm() 仅在事件完成且数据已保存后发生？

附上代码。

子组件

<template>
    <!-- Contains a form -- >
</template>

<script>
export default {
    
    data() {
        return {
            additionalInfo: 
                {
                    id: new Date().toISOString(),
                    fullName: '',
                    preAuthorize: '',
                    serviceAddress: ''
                },
            validation: {
                fullNameIsValid: true,
                serviceAddressIsValid: true
            },
            formIsValid: true,
            addServiceButtonText: '+ Add Service Notes (Optional)',
            serviceNotes: [],
            showServiceNotes: false,
            enteredServiceNote: '', //service notes addendum
        }
    },
    computed : {
        // something
    },
    methods: {
        
        setServiceNotes(){
            this.showServiceNotes = !this.showServiceNotes;
        },
        addAnotherParty(){
            this.validateForm();
            if(!this.formIsValid){
                return;
            }
            this.$emit('add-parties', this.additionalInfo); //event
            console.log(this.clearForm);
        },
        
        clearForm(){
            this.additionalInfo.fullName = '';
            this.additionalInfo.serviceAddress = '';
            this.additionalInfo.preAuthorize = false;
        }
    }
}
</script>

父组件

<template>
    <div>
        <base-card 
        ref="childComponent"
        @add-parties="updateAdditionalInfoList">
            <!-- Wrapper for the `Parties Being Served` component-->
                <template v-slot:title>
                    <slot></slot>
                </template>

        </base-card>
    </div>
    
</template>
<script>
export default {
    data() {
        return {
            hasElement: false,
            selectedComponent: 'base-card',
            additionalInfoList : [],
            clearForm: false
        }
    },
    methods: {
        updateAdditionalInfoList(additionalInfo){ //save changes passed via event
            this.additionalInfoList.push(additionalInfo);
            console.log('emitted');
            console.log(this.additionalInfoList);    
            setTimeout(() => {
                this.$refs.childComponent.clearForm();  //clear the form in child
            }, 2000);
            
        }
    }
}
</script>

Answer 1

试试这个

addAnotherParty(){
  this.validateForm();
  if(!this.formIsValid){
    return;
  }
  let emitObj = JSON.parse(JSON.stringify(this.additionalInfo));
  this.$emit('add-parties', emitObj); //event
  console.log(this.clearForm);
}

如果你的对象不深那么你可以使用

let emitObj = Object.assign({}, this.additionalInfo);

而不是字符串化和解析

VueJS - 运行事件成功发出后的代码

VueJS - Run Code after event is successfully emitted

javascript

vue.js

events

vuejs2

eventemitter

VueJS - 运行 事件成功发出后的代码

VueJS - Run Code after event is successfully emitted

javascript

vue.js

events

vuejs2

eventemitter

VueJS - 运行事件成功发出后的代码