CODEWITHSUNDEEP
vue.jsvuejs3element-uielement-plusel-plus
arivero
arivero

Reputation: 965

Access element from v-on event handler in vue3

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?

Upvotes: 3

Views: 1923

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 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

Upvotes: 1

Related Questions