要素UIの入力コンポーネントで$ refsを使用する

Question

refとel-inputの要素UIのコンポーネントを使用できますか？私は$refsを使用して、Vueインスタンスがマウントされているときに入力に集中しようとしています。ここに私のコードは次のとおりです。

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

そして、私のVueのインスタンスで：

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

focus方法は、私が法にthis.$refs.test.focus()を移動し、イベントを通してそれをトリガーしようとしていても、まったく機能していません。

Answer 1

$refsオブジェクトストアVueコンポーネントが正常に動作するはずです。問題は、コンポーネントにが存在しないfocusメソッドを呼び出そうとしていますが、の入力コンポーネントのテンプレートのどこかに存在しています。右、

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

コードのきれいなラインは、これまで行われていない：

だから、実際にはこのような何かをする必要があると思います入力を見つけるには？したがって、入力にオートフォーカスしたい場合は、アプリのmountedメソッドで何かを呼び出すのではなく、次のように入力してください：

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