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?
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