[Vuejs]-$refs not loaded on Vue.js component

by

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.

-1👍

Did you defined clearValue function in methods?
Like below?

methods: {
    clearValue() {
      // Implement your logic to clear values here
    }
  }

Leave a comment