vue.js - 将 $refs 与 Element UI 输入组件一起使用

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 方法，该方法在组件中不存在，而是在 input 内部某处组件的模板。

因此，要真正找到输入，您必须执行如下操作:

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

这不是有史以来最漂亮的代码行，对吧？因此，如果您想自动聚焦输入，而不是在应用的 mounted 方法中调用任何内容，只需执行以下操作:

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