Question

是否可以将ref与来自Element-UI的el-input组件一起使用？我正在尝试使用$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方法，而是在组件内某处的输入上＃39; s模板。

所以，要真正找到输入，你必须做这样的事情：

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的输入组件一起使用

3 个答案: