Vue.js on focus text box on load

Question

How to focus on load with VueJS?

If I use jquery, all I have to do is:

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

Is there a vue-way or not?

Answer 1

You can create a custom directive for it:

 // 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://vuejs.org/v2/guide/custom-directive.html

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