Adjusting focus of input element in vue.js

Question

I am trying to set the focus of an input element in Vue.js. I found some help on the Internet, but none of the explanations helped me.

Here is my code:

<template> <form method="post" action="" v-on:submit.prevent="search"> <input type="text" placeholder="Person name" required v-model="name" v-el="nameInput" /> <input type="text" placeholder="Company" required v-model="company" v-el="domainInput" /> <input type="submit" value="Search" class="btn show-m" /> </form> </template> <script> export default { data () { return { contacts: [], name: null, company: null } }, ready: { // I tried the following : this.$$.nameInput.focus(); this.$els.nameInput.focus(); // None of them worked ! } methods: { search: function (event) { // ... // I also would like to give the focus here, once the form has been submitted. // And here also, this.$$ and this.$els doesn't work }, } } </script> 

I tried this.$$.nameInput.focus(); and this.$els.nameInput.focus(); for what I could find on the Internet to set focus, but this.$$ is undefined and this.$els empty.

If this can help, I am using vue.js v1.0.15

Thank you for your help.

Answer 1

In vue 2.x, you can solve this with the directive .

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

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

 <input v-focus> 

Answer 2

There are several issues.

First , v-els are defined as follows:

 <input v-el:input-element/> 

This will turn the variable in camelCase into code. You can read more about this strange functionality here .

In addition, you must have access to the variable through this.$els.inputElement . Keep in mind that it only appears in the component that you define for this element (or the main application itself, if you defined it there).

Secondly , auto focus doesn't seem to work on Firefox (43.0.4), at least on my machine. Everything works fine in Chrome and focuses as expected.

Answer 3

Another solution using Vue 2.x and ref .

You can use the ref/$refs attribute to target your input and focus it.

The example uses a simple method that can target inputs using the ref attribute provided for inputs. Then access the $refs property in your instance to get a reference to the DOM element.

 <script> export default { // ... mounted: function () { this.focusInput('nameInput'); }, methods: { // This is the method that focuses the element focusInput: function ( inputRef ) { // $refs is an object that holds the DOM references to your inputs this.$refs[inputRef].focus(); }, search: function (event) { this.focusInput('domainInput'); }, } } </script> 

 <template> <form method="post" action="" v-on:submit.prevent="search"> <input type="text" placeholder="Person name" required v-model="name" ref="nameInput" /> <input type="text" placeholder="Company" required v-model="company" ref="domainInput" /> <input type="submit" value="Search" class="btn show-m" /> </form> </template>