[Vuejs]-Losing autofus on Vue.js toggle of v-show

Autofocus only works on page load. If you want to change the focus when the user submit the form, I suggest you to create a watch for "activeStep".

Something like this

watch:{
    activeStep(step){
        if( step === 'email'){
            this.$els.emailField.focus();
        }
        // ...
    }
},

More info:

The autofocus content attribute allows the author to indicate that a
control is to be focused as soon as the page is loaded, allowing the
user to just start typing without having to manually focus the main
control.

There must not be two elements with the same nearest ancestor
autofocus scoping root element that both have the autofocus attribute
specified.

https://www.w3.org/TR/html5/forms.html#attr-fe-autofocus

Check this jsfiddle

jsfiddle.net/blogui91/e53Lgnnb/12/

i just create a new component which shows the input, but with the difference when is created, it focuses automatically depending of the prop ‘autofocus’ the same for if it’s required. and a prop called ‘model’ it will help you the update the value in the parent component using ‘.sync’ to update it, I hope it helps you

Temporary work around until I understand exactly why it can’t work. Add:

watch: {
        activeStep: function () {
          $("#" + this.activeStep + " input[name=" + this.activeStep + "]").focus();
        }
    }

What if you make the password field a v-if rather than a v-show? You’ll always be on the password step when the form gets submitted, so you don’t have to worry about the field not existing when it’s submitted. Because v-if creates the dom element only when it’s true, the autofocus attribute would trigger as it is created.