My goal is to show a component when the 'Add Patient' button is clicked using a v-if directive:
// within <template></template>
<button type="button" class="btn btn-info" @click="showPatientForm">Add a patient</button>
...
<div class="d-flex flex-column w-75 contentOrder">
<div class="" v-if="showArticle" ref="patientOk"> <!-- display articles if patient exists -->
<ArticleCmp/>
</div>
<div class="hidden" ref="patientNotOk" v-else> <!-- Show form to add a new patient -->
<PatientForm :addPatient="addPatient"/>
</div>
</div>
// within <script></script>, export default(){ methods:... }
showPatientForm(){
try{
const createPatient = this.$refs.patientNotOk // Locate the form <div>
createPatient.classList.remove('hidden') // Remove the hidden class
}
catch(err){
console.error(err)
}
},
I understand that this approach may not be ideal, as changing the v-else to v-if causes issues when switching between an existing patient and creating a new one.
The challenge lies in ensuring that when clicking on an existing patient and then trying to create a new one, this.$refs.PatientNotOk returns null. This is because VueJS (Vite 3) does not initially render the v-else since it is false. How can I force the rendering of the v-else?
Here's the error log :
TypeError: createPatient is null
showPatientForm CreateOrderView.vue:127
2 CreateOrderView.vue:33
callWithErrorHandling runtime-core.esm-bundler.js:173
callWithAsyncErrorHandling runtime-core.esm-bundler.js:182
invoker runtime-dom.esm-bundler.js:345
CreateOrderView.vue:131:25
showPatientForm CreateOrderView.vue:131
2 CreateOrderView.vue:33
callWithErrorHandling runtime-core.esm-bundler.js:173
callWithAsyncErrorHandling runtime-core.esm-bundler.js:182
invoker runtime-dom.esm-bundler.js:345
(line 131 corresponds to the console.error within the catch block, line 127 is where createPatient.classList.remove is called, and line 33 refers to the 'Add a patient' button in the template)