Using $refs with Element UI's input component

Question

Is it possible to use ref with el-input component from Element-UI? I am trying to use $refsto focus on the input when my Vue instance is mounted. Here is my code:

<div id="app">
    <el-input type="text" ref="test" placeholder="enter text"></el-input>
</div>

And in my Vue instance:

new Vue({
  el: "#app",
  mounted(){
    this.$refs.test.focus()
  }
})

The focus method is not working at all, even if I move this.$refs.test.focus() into a method and try to trigger it through an event.

Answer 1

The $refs object stores Vue components and should be working fine. The problem is that you are attempting to invoke a focus method which doesn't exist in the component, but rather on an input somewhere inside the component's template.

So, to actually find the input you'd have to do something like this:

this.$refs.test.$el.getElementsByTagName('input')[0].focus();

Not the prettiest line of code ever made, right? So, instead of calling anything in your app's mounted method, if you want to autofocus on the input, just do this:

<el-input type="text" placeholder="enter text" autofocus></el-input>

Answer 2

This can be also solved your problem.

// Focus the component, but we have to wait
// so that it will be showing first.
   this.$nextTick(() => {
       this.$refs.inputText.focus();
   });