Javascript 在vue.js中设置输入元素的焦点

我试图在Vue.js中设置输入元素的焦点。我在网上找到了一些帮助，但没有一个解释对我有用

这是我的密码：

<template>
    <form method="post" action="" v-on:submit.prevent="search">
        <input type="text" placeholder="Person name" required v-model="name" v-el="nameInput" />
        <input type="text" placeholder="Company" required v-model="company" v-el="domainInput" />
        <input type="submit" value="Search" class="btn show-m" />
    </form>
</template>

<script>
export default {
    data () {
        return {
            contacts: [],
            name: null,
            company: null
        }
    },
    ready: {
        // I tried the following :
        this.$$.nameInput.focus();
        this.$els.nameInput.focus();
        // None of them worked !
    }
    methods: {
        search: function (event) {
            // ...

            // I also would like to give the focus here, once the form has been submitted.
            // And here also, this.$$ and this.$els doesn't work
        },
    }
}
</script>

导出默认值{
数据（）{
返回{
联系人：[]，
名称：空，
公司：空
}
},
就绪：{
//我尝试了以下方法：
这是$$.nameInput.focus（）；
这是.$els.nameInput.focus（）；
//他们都没有工作！
}
方法：{
搜索：功能（事件）{
// ...
//一旦提交了表格，我还想在这里重点介绍一下。
//还有这里，这个。$$和这个。$els不起作用
},
}
}

我尝试了

this.$$.nameInput.focus（）

和

这个.els.nameInput.focus（）

用于我可以在线找到的目标焦点，但是

this.$$

未定义，

this.$els

为空

如果这有帮助的话，我正在使用vue.jsv1.0.15

---

谢谢您的帮助。

有几个问题

首先，v-EL的定义如下：

<input v-el:input-element/>

<input type="text" v-focus>

这将把变量转换为代码中的camelCase。你可以阅读更多关于这个奇怪的功能

除此之外，您应该能够通过

this.$els.inputElement

访问变量。请注意，它只会出现在您正在定义该元素的组件中（或者主应用程序本身，如果您在那里定义了它）

---

其次，自动对焦在Firefox（43.0.4）上似乎不起作用，至少在我的机器上是这样。在Chrome上，一切都很好，并按预期聚焦。

在vue 2.x中，您可以使用一个简单的解决方案

然后可以对输入和其他元素使用

v-focus

属性：

<input v-focus>

另一种使用Vue 2.x和

ref

的解决方案。 您可以使用该属性以输入为目标并对其进行聚焦

在该示例中，使用了一个简单的方法，该方法可以使用提供给输入的ref属性来定位输入。 然后访问实例上的

$refs

属性以获取对DOM元素的引用

导出默认值{
// ...
挂载：函数（）{
这个.focusInput（'nameInput'）；
},
方法：{
//这是聚焦元素的方法
焦点输入：函数（inputRef）{
//$refs是一个对象，它保存对输入的DOM引用
这是。$refs[inputRef].focus（）；
},
搜索：功能（事件）{
这个.focusInput（'domainInput'）；
},
}
}

---

此解决方案最适合一次性情况或可重用组件。对于更全局的方法，该指令是可行的。

根据vue 2.x，您还可以在组件中本地注册“指令”以获得自动对焦

只需在组件中写入指令：

export default {
  directives: { focus: {
    inserted: function (el) {
    el.focus()
    }
  }
  }
}

然后在模板中，可以对任何元素使用新的v-focus属性，如下所示：

<input v-el:input-element/>

<input type="text" v-focus>

在子元素内设置焦点 （对于像我一样挣扎了几个小时的人）

家长：

<template>
  <div @click="$refs.theComponent.$refs.theInput.focus()">
    <custom-input ref="theComponent"/>
  </div>
</template>

<template>
  <input ref="theInput"/>
</template>

 <b-form-input  v-model="query" ref="searchInput" ></b-form-input>

  mounted(){
    this.$refs.searchInput.$el.focus()
  }

---

使用

ref

我成功地将输入集中在

挂载的

上，如下所示

模板：

<template>
  <div @click="$refs.theComponent.$refs.theInput.focus()">
    <custom-input ref="theComponent"/>
  </div>
</template>

<template>
  <input ref="theInput"/>
</template>

 <b-form-input  v-model="query" ref="searchInput" ></b-form-input>

  mounted(){
    this.$refs.searchInput.$el.focus()
  }

---

这很奇怪，为什么会有这种功能？（如果你有任何想法）。

v-el=“XXX”

是更符合逻辑的否？但这是可行的，因此您应该得到我接受的答案：）谢谢您是当前功能的基本思考过程。此答案应标记为解决方案。它在firefox和chrome中运行得非常好，确实有效。但是我不得不使用

inserted:function（el）{el.\uuVue\uVue.focus（）}

可能是因为我使用的是vue element-ui.Works，以及我如何通过方法来实现它？？注意：谢谢。。。为我节省了大量时间即使是正确的，Vue cli和Vue的默认linter将建议您使用

this.$refs.searchInput.$el.focus（）

；）@西里尔。在对象字段中使用

$

不能在大多数其他语言中使用。所以我时不时感到困惑。在编辑中修复了它。