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?

Boussadjra Brahim · Accepted Answer · 2021-06-14 21:29:00Z

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

edited Jun 14, 2021 at 21:29

answered Jun 14, 2021 at 19:47

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Access element from v-on event handler in vue3

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related