vuejs: Trying to focus the input using v-el directive

In Vue.js 2.x you can create your own directive to focus a field automatically:

Vue.directive('focus', {
    inserted: function (el) {
        el.focus();
    },
    update: function (el) {
        Vue.nextTick(function() {
              el.focus();
        })
    }
})

Then you can use v-focus attribute on inputs and other elements:

<input v-focus>

Working example: https://jsfiddle.net/LukaszWiktor/cap43pdn/

Your passwordInput is inside a v-if block, which only gets rendered when you set flow.password to true; However Vue uses asynchronous rendering, so the v-if block will not be rendered immediately. You can use Vue.nextTick to wait until it does:

this.flow.password = true;
var self = this;
Vue.nextTick(function () {
  self.$$.passwordInput.focus();
});

Read the guide about async rendering for more details.

If you are using vuejs 2, you should read this:

https://v2.vuejs.org/v2/guide/migration.html#v-el-and-v-ref-replaced

--

In this case, in your template:

use ref="passwordInput" instead v-el="passwordInput"

and in your method:

this.$refs.passwordInput.focus()

I hope this help you!

Glad this worked for some of you. I have no idea why, but after trying every conceivable variation of the accepted answer I could not get the $$.ref property when using v-repeat. I could only access the newly created dom elements like so:

new Vue({
el: '#reporting_create',
data: {
    recipients: {
        0: {
            fname: null,
            lname: null,
            email: null,
            registration: false,
            report: false
        }
    },
    curRec:1
},
methods: {
    addRecipient: function(){
        event.preventDefault();
        this.recipients.$add(
            this.curRec,
            {
                fname: null,
                lname: null,
                email: null,
                registration: false,
                report: false
            }
        );
        var num = this.curRec;
        this.$nextTick(function () {
            console.log(this._children[num].$$.rowrec);
            newSwitches.find('.switch').bootstrapSwitch();
        })

        this.curRec++;
    }
}})

html:

<template v-repeat="recipients">
        <div class="row" v-el="rowrec">
            <div>{{$key}}</div>
        </div>
</template>

The addRecipients function was called outside the v-repeat so even the suggested answer here did couldn't help

Not sure if there is an issue with doing it this way but it works and I'm tired.