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

vue created this refs
vue refs
vue watch $refs
vue refs empty
vue refs undefined in computed
vue check if ref exists
this.$refs.modal.show is not a function vue
vue refs add class

I have a reference to a component

 <Gmap ref="mapRef">

In mounted I am doing this, just to see the objects are available

 mounted(){
   let self = this
   console.log(self.$refs) // Shows the mapRef object reference
   console.log(self.$refs.mapRef) // returns undefined ???
 }

self.$refs shows...

  mapRef: VueComponent {_uid: 207, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …}

So then why does self.$refs.mapRef return undefined?? Even though its clearly there??

I had a similar problem getting a ref to a leaflet map instance, try waiting for the "nextTick"

mounted(){
  this.$nextTick(()=>{
    let self = this
    console.log(self.$refs) // Shows the mapRef object reference
    console.log(self.$refs.mapRef) // returns undefined ???
  });
}

see the docs for more- https://vuejs.org/v2/api/#vm-nextTick and https://vuejs.org/v2/api/#mounted

[SOLVED] This.$refs.key returns undefined when it , Hello. I have a problem exactly the same as defined here although this one is archived. refs) (inside created() method inside a low level component) it retu… allowing you to, for instance, access their methods/properties directly. when v-if in component child modify to show, the lifecycle call again… Dismiss Join GitHub today. GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.

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.

How to use refs to access your application DOM in Vue.js , If a ref attribute is added to an HTML element in your Vue template, you'll then be able to reference that element or even a child element in your Vue instance. On template inspection in your browser, they do not show up at all because it about Vue refs, they return an object, but judging by the undefined  Dismiss Join GitHub today. GitHub is home to over 50 million developers working together to host and review code, manage projects, and build software together.

You can wrap your function in the $mapPromise method provided by vue2-google-maps, which will ensure that the Map has fully rendered before running your code:

let self = this;
self.$refs.mapRef.$mapPromise.then(() => {
    console.log(self.$refs.mapRef);
})

This should solve any problem where your code relies the Google Map to be fully rendered in order to run.

*NOTE: $mapPromise was named $mapCreated in past versions.

See Docs: https://github.com/Jeson-gk/vue2-google-maps/blob/master/API.md#mapcreated--promisegooglemapsmap

-

The reason why console.log(self.$refs); was showing the value when you looked, is that self.$refs is passed by reference. So, by the time you viewed the console, the rest of the data finished loading in a matter of milliseconds. And self.$ref.mapRef is not passed by reference, so it remains undefined, as it was during runtime.

Try adding a breakpoint directly after console.log(self.$refs); and before console.log(self.$refs.mapRef); and you will probably find that the data had not loaded.

Vue.js $refs are undefined, I'm trying to figure out why my Vue instance's refs are undefined. Vue: data: { name: 'Vue.js' } However, when I do that it doesn't work and an error shows in that uses the v-app component before you've even told Vue to make use of it, If you want to update data of a component in Vue, there are a number of ways to do​  The reason for this, is that when accessing the DOM elements and manipulating them directly, we are essentially skipping the virtual DOM as we discussed in a previous post. So Vue is still controlling the h1 element because it holds a copy of the template, and when Vue reacts to changes in the data property, it updates the virtual DOM and

VueJS components ref is undefined at all stages, VueJS components ref is undefined at all stages - javascript. I get that there is "​ref registration timing" complication even if I don't fully understand it. However You are trying to access it from outer, but it is not defined there, so it never shows up. alerts.push({}) and i can see they are added by console.logging the results. The $refs can be accessed both inside the Vue.js instance and outside of it. However, they are not data properties, so they are not reactive. On template inspection in your browser, they do not show up at all because it is not an HTML attribute; it is only a Vue template attribute.

Refs are undefined in setup() outside of lifecycle method · Issue #6 , As a follow-up to liximomo/vue-function-api#10 (comment), the refs are now injected vuejs / composition-api In React there is useRef- you define the ref in the component I just meant that the refs are undefined and they are part of context. This ensures they always expose the latest values even after  Now that refs are no longer reactive, we need to emit events and payloads from child components. This is fine and works well, but it becomes hard to maintain in the following scenario: When you create a custom form input component, that

The $refs maybe undefined · Issue #9856 · vuejs/vue · GitHub, fix(types): $refs maybe undefined (vuejs#9856 … error, which is why there's no ref: Because of the render error, no element was created, so there's no element for the ref to reference. Do you try to use v-show instead v-if? Hi all, It seems that when the browser autocompletes fields, component data is not updated. I’ve done some initial research and it seems that this is because element.value is being accessed directly, and Vue / Javascript is unable to detect the change. Are there any strategies to work round this? I’m thinking: do a dirty-check on all text input components before submitting run a

Comments
  • What about plain old this.$refs?
  • Note that mounted does not guarantee that all child components have also been mounted. docs
  • I did provide the link, but here it is again mounted docs
  • Instead of console.log() use debugger (or place a breakpoint), and inspect the values
  • You can look into this question. console.log has some quirks
  • nah, still returns undefined. Im stumped :(
  • Ive tried jsFiddle. And it works there. It appears to only be happening in my project unfortunately. Im using vue2-google-maps component for the map. So maybe its something to do with that particular components lifecycle or something like that?? Not too sure.
  • I looked at the vue2-google-maps repo, and it looks like a similar issue was addressed with nextTick being the main answer, but maybe some of the responses here will help - github.com/xkjyeah/vue-google-maps/issues/260
  • I solved it, the referenced GMap was inside a v-if statement. I changed it to v-show and it works now. Wierd that the console.log(this.$refs) still showed it as "being there" though.