Vue.js：“TypeError：无法读取未定义的属性（读取'$refs）'”

Question

We are triggering methods from a parent component in a child component like so:

await this.$refs.patientinputmask.$refs.patientpersonaldata.ChangePersonalData();
await this.$refs.patientinputmask.$refs.patientaddressdata.SavePersonalAddressObject();
await this.$refs.patientinputmask.$refs.patientbankaccountdata.SavePersonalBankAccountObject();
await this.$refs.patientinputmask.$refs.patientrelatedcontacts.SaveRelatedContactObject();
if (this.invoiceHN == true) {
          await this.$refs.patientinputmask.$refs.invoicedata.$refs.invoiceHN.$refs.invoiceKasseHeaderHN.SavePatientDataForInvoice();
          await this.$refs.patientinputmask.$refs.invoicedata.$refs.invoiceHN.$refs.invoicingTemplateHN.SavePatientTemplateConfigDTO();
        }

From time to time an error occurs: [Vue warn]: Error in von handler (Promises/async): "TypeError: Cannot read properties of undefined (reading '$refs')" which causes the whole cascade of functions calls to collapse and none of these methods are being triggered. The methods and the data are located in the child components. What issue can cause that behavior?

Answer 1

Sounds like some of the child components are not completely mounted when you run your code. When are you running this code on the parent element?

You could fire an event from each of the child components upon mount, then run your code after all of them have been mounted.

<child-component @hook:mounted="doSomething" />

(Example found here: Vue JS 2.0 Child Component Mounted Callback )