Composition-api: How to access the element (aka $el) reference?

[thenikso]

This is more a clarification on how would one (or should one?) access what's now presented as the this.$el HTML root template element.

Have I missed it in the RFC?

My workaround is to manually add an ref="el" to the root template element and use context.refs.el in, say, the onMounted callback.

[PaulKujawa]

context.refs.el gave me the vue component instance. I had to go with context.refs.el.$el for the object of type Element. but that worked for now 🙌

// edit:
I also do not know how to access that when used via function composition.

[kidonng]

NOTE: This comment is about vue-function-api, @vue/composition-api may have different behaviour.

You can access this in lifecycle functions such as onMounted, see demo.

I think vue-function-api provides the context parameter as a helper in order to make up for the absence of this, which is slightly different from the RFC - but that doesn't mean you can never get this (as mentioned above). (Sorry, I missed that in the original RFC)

---

To go deeper, you can access this in (only in the plugin, not related to the RFC):

• Lifecycle functions
• First parameter (getter) of watch()
• Both getter and setter of computed() (NOT the one you expect, this refers to instances created by the plugin)

[liximomo]

My workaround is to manually add an ref="el" to the root template element and use context.refs.el in, say, the onMounted callback.

It's fine to use ref.

[MatanYadaev]

@kidonng I have a question, how should I access $route inside computed? Should I just not use arrow function? Should I declare some vm variable? Direct access to Vue?

[beeplin]

setup(props, context) {
  const a = computed(() => context.root.$route)
}

@MatanYadaev

[MatanYadaev]

@beeplin Thanks!

[tiepnguyen]

@thenikso anytime I need to access $el or $children (which I usually do), I have to use onMounted function (not arrow function) in order to have this

onMounted(function() {
  this.$el
  this.$children
})

I cannot ref to children elements in case it's a slot

Any better idea, guys?

[kidonng]

@tiepnguyen I can't get you. context.slots doesn't do?

[pikax]

You can access refs using ref https://composition-api.vuejs.org/api.html#template-refs

I will close this issue, if you need please reopen or create a new issue.

---

Remember you use the forum or the Discord chat.

[SeyyedKhandon]

@pikax I'm trying to access the dom element using ref as the docs says, but i could only get the element using $el like

  const dropdown = ref(null as unknown) as Ref<HTMLElement>;
const dropdownHeight = dropdown.value.$el.clientHeight;

which has a typescript Error. what is the rightway in to access it?

[pikax]

@SeyyedKhandon you don't need $el

const dropdown = ref(null) as Ref<HTMLElement>;
const dropdownHeight = dropdown.value.clientHeight;

[SeyyedKhandon]

@pikax here is the type error: which it seems to work with: const dropdown = ref(null as unknown) as Ref<HTMLElement>;

64:22 Conversion of type 'Ref<null>' to type 'Ref<HTMLElement>' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
  Type 'null' is not comparable to type 'HTMLElement'.
    62 |   },
    63 |   setup(_props, context) {
  > 64 |     const dropdown = ref(null) as Ref<HTMLElement>;
       |                      ^
    65 |     const dropdownHeight = dropdown.value.clientHeight;

also, I found out that when using ref on vue component, it will return a Vue instance which has reference to its dom with dropdown.value.$el, and when using on the raw HTML element, it will return the element itself which can be used like dropdown.value.( i couldn't find anything about this in the docs)

[pikax]

Typescript is right, you create a ref with a value of null and then you assign the type that doesn't overlap with null

This is more correct, because the ref will only be assigned after mount you will need to do null checks.
const dropdown = ref(null) as Ref<HTMLElement | null>;

[jacekkarczmarczyk]

@pikax why not just const dropdown = ref<HTMLElement>()? Also as I understand dropdown is not a native select, so it should be more like const dropdown = ref<SomeComponentOrGenericVueInstanceClass>()