Vue this.$refs is undefined during mounted() in vue2-dropzone component

Question

I am currently trying to make sure the my componentvue2dropzone is disabled on the initial load of the application, then i began to notice this error in the console when I am trying to make the app mobile responsive.

[Vue warn]: Error in mounted hook: "TypeError: this.$refs.vue2dropzone is undefined"

followed by a

TypeError: "this.$refs.vue2dropzone is undefined"

I have a noticed this problem occurring in Vue that seems to be a common issue based on my research, such that when you have v-if or v-else-if in a component child modifying to show something, the lifecycle will be called again.

A snippet of my code for vue2dropzone component just includes

In my typescript file

private mounted() {
  this.$refs.vue2dropzone.disable(); 
}

In my vue file

    <div v-if="some condition">
     <form>
       <vue2Dropzone 
       ref="vue2dropzone" 
       id="dropzone" 
       class="vue-dropzone"
       ></vue2Dropzone> 
     </form>
    </div>
    <div v-else-if="some other condition">
     <form>
       <vue2Dropzone 
       ref="vue2dropzone" 
       id="dropzone" 
       class="vue-dropzone"
       ></vue2Dropzone> 
     </form>
   </div>

I am beginning to wonder if the v-show being before the first v-if doesn't let recall the lifecycle because when I am on the web app, it is disabled but when i switch to mobile responsiveness it shows up as undefined.

Are there any solutions to solve this? I have seen v-show being used and this.$nextTick but it really didn't help me in my case. Should i put this in another part of the lifecycle besides mounted()?

can you add the code where you declare "target", is it data or props — Jake Lam, May 21 '20 at 14:32
@JakeLam its just data, really, i made some changes to be more appropriate. Forgot to include some stuff — penguin, May 21 '20 at 14:45
you could try `const self = this; setTimeout(() => { self.$refs.vue2dropzone.disable() ); }, 0)` - just to mess a bit with the `event loop` — muka.gergely, May 21 '20 at 15:10
@muka.gergely doesn't affect it either...wow, i think i may have to search for another way then. Thanks though! — penguin, May 21 '20 at 15:28
Actually - can you just `console.log(this.$refs)`? If not, then you might have a similar problem to this: https://forum.vuejs.org/t/ref-not-working-on-mounted-on-vue-components/66164 — muka.gergely, May 21 '20 at 15:32

score 1 · Accepted Answer · answered May 29 '20 at 16:46

ok so I have found a method to resolve this. It seems as the vue app is loading it is quite possible that since the v-if is there the condition is not fulfilled until other asynchronous processes have fully loaded which more than likely has past the mounted lifecycle.

In order to solve this we can use a native feature of vue2-dropzone which is vdropzone-mounted so whenever it is being toggled or loads, the function runs.

e.g.

Create a function for using the disable function of vue2-dropzone

public disableDropZoneBox() {    
  this.$refs.vue2dropzone.disable();
}

in vue file

 <vue2Dropzone 
 ref="vue2dropzone" 
 id="dropzone" 
 class="vue-dropzone"
 @vdropzone-mounted="disableDropZoneBox"
 ></vue2Dropzone>

Vue this.$refs is undefined during mounted() in vue2-dropzone component

1 Answers1