How to set focus() to input?

I would like to set focus() to input when click btn

        <el-form :model="form" ref="form">
            <el-input v-model="">

            <el-button type="primary" @click="setFocus">

    export default {
        name: 'Login',
        data() {
            return {
                form: {
                    email: '',
        methods: {
            setFocus() {
        don't  work
1 Like
<el-input ref="email" v-model="">

Thanks, Could you explain?

ref isl a attribute of vue. It is used to register a reference to any html elememt or child component.

It is just like setting an id to an element so that you can reference it in javascriptThe reference will be registered under the parent component’s $refs object

So in your code you can refer an element by using


This returns the html elememt object that you have set the ref attribute on. So ypu can use all the methods of the html object

For further info


I tried, but don’t work


It work fine, when I tried this.$refs.input.$el.children[0].focus();.
I don’t understand???

Well, I guess the input is not the root element of that el-input component (probably wrapped in a <div>), so you have to get it from the children of the root element.

I don’t know the structure of your component, so I can’t be much more specific.

Note: Sometimes you need to call focus in the next tick

this.$nextTick(() => this.$refs.input.focus())

Any Idea why? This just solved my problem

Probably because you are waiting for the component to fully mount in the browser. Just a guess.

Maybe should add to your comment:

Normal input elements don’t require the .$el addition.


use this code : this.$refs.input.$refs.input.focus()

1 Like

And for the .Typescript users:

let theField = <HTMLInputElement>this.$refs.input;

It simply because the element you have to use for reference is component not an input field. You need to console.log the this.$refs.input.$el and find out the text input within the component then use focus() function. That’s the reason why .children[0] is necessary.

Yes! Thanks, this fixed this problem for me :grinning:

thanks, solved for me!

I got Parsing error: JSX element ‘HTMLInputElement’ has no corresponding closing tag.

solved with:

$refs!: {
userId: HTMLInputElement;


You can use the autofocus attribute, eg

<input type="text" autofocus />


Nice!!! Thanks…

Nice!! before I did not expect to complete the components are not mounted