Point for thought, now that this.$el and this.$refs are deprecated accessing the DOM might need a well rounded solution

[lyle45]

Point for thought, now that this.$el and this.$refs are deprecated or removed from Vue 3, accessing the DOM get's much harder

Take for example very simple situations where you'd want to access the DOM of QPage to attach events programmatically, or maybe you want to focus on QBtn after an action or want to set the caret inside a QInput as discussed and solved specifically here

In Vue 2, this was a relatively easy task,

If I wanted to measure the width and height of QCard I could easily do this.$refs.myCard.$el.clientHeight or even the riskier this.$refs.myQInput.$refs.input to access native input element

There are many reasons we'd need access to the DOM and I certainly don't expect QBtn to implement focus() method or any other specific solutions

This is a problem with whole Vue 3 IMO and not specific to Quasar, but might be preemptively solved or discussed here

So my general direction for solution for this was having all or most components expose getRootElement() method systematically and others should also have getNativeElement() if relevant. This could relatively easily be implemented with shared composables, but the template ref part would still need to be implemented in all components individually

The only oversight I currently think of for this, and the reason this.$el was removed from Vue 3, is that components can now have more then 1 root element. Not sure of best way to solve this systematically but simplest solution would be to simply return an array of refs for getRootElement(). Maybe it should always return array for consistency

I would love to here thoughts on this as I mulled over it for some time. I truly think this might have been an oversight on the Vue's team front

[ontwikkelfabriek]

@lyle45

Here's an article how to access refs and el in Vue3:
https://morioh.com/p/523b8406183e

[lyle45]

@ontwikkelfabriek Hi, that's not the problem I'm talking about

I'm talking about accessing the DOM of components you have

for e.g.

<q-card ref="myCard"</q-card>
...
setup() {
const myCard = ref(null)

function attachNativeDOMEvents() {
    myCard.value.{one of cards native DOM element?}.addEventListener(...)
}

return {myRef}
}

Point is, maybe it's right to think about creating a standard relating to this