将 $refs 与 Element UI 的输入组件一起使用

Question

是否可以将 ref 与来自 Element-UI 的 el-input 组件一起使用？当我的 Vue 实例被安装时，我试图使用 $refs 来关注输入。这是我的代码：

<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>

Answer 2

这也可以解决你的问题。

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

Answer 3

现在你可以这样使用了

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

this.$refs.test.focus();

https://element.eleme.io/#/en-US/component/input#input-methods

将 $refs 与 Element UI 的输入组件一起使用

Using $refs with Element UI's input component

vue.js

vuejs2