v-focus example

by LukaszWiktor

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.4/vue.js"></script>
<div id="login">
  <input type="radio" id="mobile" value="mobile" v-model="flow">
  <label for="mobile">Mobile</label>
  <input type="radio" id="password" value="password" v-model="flow">
  <label for="password">Password</label>
  <div v-if="flow == 'mobile'">
    <form v-on:submit="checkmobile">
        <p>
          Mobile Number<br>
          <input type="text" v-model="mobile_number" v-focus>
        </p>
    </form>
  </div>
  <div v-if="flow == 'password'">
    <form v-on:submit="checkpassword">
        <p>
          Password<br>
          <input type="password" v-model="password" v-focus>
        </p>
    </form>
  </div>
</div>

JavaScript

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

var demo = new Vue({
el: '#login',
data: {
    flow: "mobile",
    mobile_number: null,
    password: null
},
methods: {
    checkmobile: function(e) {
        e.preventDefault();
        this.flow = "password"
    },
    checkpassword: function(e) {
        e.preventDefault();
    }
}
});