CODEWITHSUNDEEP
vue.js
Mardo
Mardo

Reputation: 117

$refs and DOM traversal

I'm using a 3rd party component for my inputs that looks like this:

<base-input
    alternative
    class="mb-3"
    name="Email"
    :rules="{ required: true, email: true }"
    mode="lazy"
    ref="email"
    prepend-icon="ni ni-email-83"
    placeholder="Email"
    v-model="model.email"
>
</base-input>

I'm trying to set focus to it. I researched that you could use this.$refs.email.$el to get the root element. However this is giving me a SPAN not the INPUT control.

Does Vue have any dom traversing capabilities so I could get the input within the this.$refs.email?

Thank you in a advance.

Upvotes: 1

Views: 214

Answers (1)

Nino Filiu
Nino Filiu

Reputation: 18551

Well, the span should contain the input, so this should work

this.$refs.email.$el.querySelector('input').focus();

Upvotes: 2

Related Questions