Vue.js on focus textbox on load

Question

How to focus on load using VueJS?

If using jquery, all i should do is:

$(document).ready(function() {
   $('#username').focus();
});

Is there a vue-way or not?

Answer 1

You can create a custom directive for that:

// Register a global custom directive called v-focus
Vue.directive('focus', {
  // When the bound element is inserted into the DOM...
  inserted: function (el) {
    // Focus the element
    el.focus()
  }
})

And then use it like this:

<input v-focus>

Full example from the docs: https://v2.vuejs.org/v2/guide/custom-directive.html

Directive docs: https://v2.vuejs.org/v2/api/#Vue-directive