3

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?

Wenfang Du
  • 8,804
  • 9
  • 59
  • 90
arivero
  • 777
  • 1
  • 9
  • 30

1 Answers1

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

Boussadjra Brahim
  • 82,684
  • 19
  • 144
  • 164