Access element from v-on event handler in vue3

Question

It is not infrequent that I need to access the element of a component, in vue. For instance here in element-plus, to make sure that the focus is removed:

<el-button ref="btnLanza" @mouseleave="$refs.btnLanza.$el.blur()" @click="runLanza" round>Lanzar</el-button> 

In other frameworks, something along the lines of on-mouseleave="this.blur()" would be enough, but in vue this is not pointing to the element, so I need to define a ref and then go across the $refs, only for this small task.

Is there an alternate $this to access the component where the event is captured instead of the component where the template is defined?

Answer 1

Try it with an inline function and use the target blur method without defining the ref:

@mouseleave="($event)=>$event.target.blur()" 

or just @mouseleave="$event.target.blur()"

it's inspired by this