Vue.Js Refs Are Undefined, Even Though This.$Refs Shows Theyre There

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

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.

Why is this.$refs undefined in Vue child component?

By default content within v-dialog components isn't rendered until it is activated.

Add the eager attribute to change this <v-dialog eager>

https://vuetifyjs.com/en/components/dialogs/

Vue refs exist but refs[key] is undefined

When using refs with v-for, the component / DOM nodes are stored as an array directly to the variable name

for example

<list-item
v-for="item in items" 
:key="item.id"
:value="item.value"
ref="items"
/>

Use the refs in your component like this:

this.$refs.items[index]

$refs is undefined - Custom File Input button referencing issue

Your ref will output a string like this, when item id is 4

imageInput4

In your v-btn you are trying to access the item by index, where it should rather look like this

$refs[`imageInput${item.id}`]

However I suggest moving that call to a method, this way it will be easy to debug

buttonClicked(itemId) {
    let ref = `imageInput${itemId}`
    console.log('ref: ', ref)
    let element = this.$refs[ref]
    console.log('element', element)
    element.click()
}

Vuejs can't access refs from component

The created is fired before the template is processed.

You can find more details here: https://v2.vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

You should be able to access the $refs on the mounted event

mounted: function() {
    console.log(this.$refs.icanvas);
},

this.$refs or document are not visible in mounted() unless I use setTimeout

That is because mounted() does not guarantee that the DOM has finished rendering. You will need to wait for this.$nextTick():

mounted() {
    this.$nextTick(() => {
        console.log(this.$refs.tabsMenu) 
    });
}

The reason why setTimeout(callback, 1) works for you is because you are essentially deferring the callback (which is in your code, accessing the reference and logging it to console) to the end of the callstack, which is when the DOM would've finished rendering.

If you're familiar with using async/await, you can also do this:

async mounted() {
    await this.$nextTick();
    console.log(this.$refs.tabsMenu);
}

---

Update: It seems like your ref element is actually contained in another VueJS component <baseComponent>. In this case, listening to this.$nextTick() on the parent/consuming component is not sufficient, because it doesn't guarantee the inner component is mounted and rendered.

If you still need to use this approach, then my only advice is to ensure that the inner <baseComponent> emits some kind of event when it is mounted and its DOM has been rendered, e.g. by emitting a ready event:

// Inside baseComponent
mounted() {
    this.$nextTick(() => {
        this.$emit('ready');
    });
}

Then, in your parent component, you can listen to the event as such:

<baseContainer v-on:ready="onReady">
  <ul ref="tabsMenu" id="tabs-menu" class="flex-inline flex w-full">
    <li>Home</li>
    <!-- many more items -->
    <li>Contact</li>
  </ul>
</baseContainer>

Then in the component's code:

methods {
    onReady: function() {
        console.log(this.$refs.tabsMenu);
    }
}

$refs is undefined when window.addEventListener('focus') is being fired

Do not define methods with arrow functions. In arrow functions this is bound lexically and will not point to the Vue.

methods: {
  pageFocused(){
    console.log('pageFocused')
    console.log(this)
    this.$refs.commandLine.focus()
  }
}

See VueJS: why is “this” undefined?

I suspect that it's because window.addEventListerer puts my function
into different context, so this variable doesn't represent my
component.

Vue binds methods to the Vue object, so that particular code will work typically. You cannot however, bind an arrow function. Thus, your issue.

---

Related Topics