Vue.js refs are undefined, even though this.$refs shows theyre there

by

I solved this by using v-show instead of v-if.

I had the component inside a v-if statement.

 <div v-if="!isLoading"> 
   <GMap ref="mapRef" />
 </div>

I just changed that to v-show

<div v-show="!isLoading"> 
   <GMap ref="mapRef" />
 </div>

And now the object is available in mounted(). Still find it strange that the console.log(this.$refs) showed it being available as a key on this.$refs, even though it actually wasn’t? Thats strange behaviour.

The other wierd thing was, that even if I tried to access this.$refs.mapRef in my data loading section, AFTER THE DATA WAS LOADED, (ie after isLoading=false), I still couldn’t access it. Even though then, it should’ve been available because the v-if passed.

So v-show solved it, by just hiding the div, instead of not rendereding it. Stupid little workaround.

Leave a Comment