Question 239311 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – $refs not loaded on Vue.js component

I have a component in Vue.js that has a modal view with different references inside.

<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-model>

    <confirmation-dialog
      ref="confirmAndCreatePatient"
    />
    ...
  </div>
</template>

Inside the component I have

clearInputs () {
   this.$refs.patientCreationOrDetection.clearValue()
},

I have used this component in different places in my project, and it works for all occurrences but one.

In this one occurrence, I got an error undefined as no function clearValue().

if I print out the $refs in this occurrence all refs inside the model view are undefined, but others outside like confirmAndCreatePatient are not null.
All the elements are visible and can be interacted with and worked (if not calling the $refs)

Furthermore: When I get the error and the page beneath the modal view presents this error, the refs are defined. So if I click the button clearInputs twice the first time the this.$refs.patientCreationOrDetection is undefined, then the error is accused and the second time this.$refs.patientCreationOrDetection is a valid object.
This is not the timing problem, because if I put the if statement :

clearInputs () {
  if (this.$refs.patientCreationOrDetection) {
    this.$refs.patientCreationOrDetection.clearValue()  
  }
},

I can click this all day and will never triggered.

What could be the explanation for this behavior?

I use Nuxt and the Vue framework.

Tags:

2

Answers


  1. 0

    Did you defined clearValue function in methods?
    Like below?

    methods: {
    clearValue() {
      // Implement your logic to clear values here
    }
  }
    Login or Signup to reply.
  2. 0

    You didn’t specify if your button is inside the modal or not, but on the off chance it isn’t, I may know why your ref is invalid.

    If your modal component (or if its a third party library modal) uses v-if/v-else conditional rendering rather than v-show, the element will not be present in its DOM – that includes its data (variables, methods, etc.)

    Therefore, when you attempt to call clearInputs() and the modal is not displaying, the ref(s) will be unavailable if they are within the modal when its conditionally not rendering.

    Read more about conditional rendering here.

    Side note, your example code has your ending tag for "b-modal" as "b-model" – just wanted to point that out on the other off chance that you have that as a typo in your real code.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search