One of my Vue.js components features a modal view with various embedded references.
<template>
<div>
<b-modal
ref="modalDialog"
>
<b-row>
<!-- document -->
<b-col>
<document-creation ref="documentCreation"/>
</b-col>
</b-row>
<patient-creation-or-detection ref="patientCreationOrDetection" />
....
</b-modal>
<confirmation-dialog
ref="confirmAndCreatePatient"
/>
...
</div>
</template>
Within this component, there is a method that attempts to clear inputs:
clearInputs () {
this.$refs.patientCreationOrDetection.clearValue()
},
I have successfully used this component in multiple instances throughout my project, except for one specific occurrence where I encountered an error stating
undefined as no function clearValue()In this problematic instance, when I inspect the $refs object, all references inside the modal view are undefined, whereas other references not within the modal like confirmAndCreatePatient remain intact.
Despite the visibility and interactability of all elements, the method fails when trying to access the $refs.
Interestingly, when the aforementioned error occurs and triggers, the page below the modal displays properly. Upon clicking the button to clear inputs again, the reference
this.$refs.patientCreationOrDetectionThis issue seems unrelated to timing, as even by implementing an if statement:
clearInputs () {
if (this.$refs.patientCreationOrDetection) {
this.$refs.patientCreationOrDetection.clearValue()
}
},
The method never gets triggered despite continuous clicks on the button.
What could possibly explain this peculiar behavior?
For context, I am utilizing Nuxt along with the Vue framework.