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

Question

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

这是我的代码：

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

我尝试了 this.$$.nameInput.focus(); 和 this.$els.nameInput.focus(); 我可以在网上找到的焦点，但是 this.$$ 未定义，this.$els 是空的。

如果有帮助，我正在使用 vue.js v1.0.15

感谢您的帮助。

Answer 1

有几个问题。

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

<input v-el:input-element/>

这会将变量转换为代码中的驼峰命名法。您可以阅读有关此奇怪功能的更多信息 here.

除此之外，您应该可以通过 this.$els.inputElement 访问变量。请注意，它只会出现在您定义该元素的组件中（或主应用程序本身，如果您在那里定义的话）。

其次，自动对焦似乎在 Firefox (43.0.4) 上不起作用，至少在我的机器上是这样。在 Chrome 上一切都很好，并按预期集中注意力。

Answer 2

在vue中2.x你可以用一个directive来解决。

Vue.directive('focus', {
    inserted: function (el) {
        el.focus()
    }
})

然后您可以在输入和其他元素上使用 v-focus 属性：

<input v-focus>

Answer 3

另一种使用 Vue 2.x 和 `ref` 的解决方案。

您可以使用 ref/$refs 属性来定位您的输入并聚焦它。

在示例中使用了一个简单的方法，它可以使用提供给输入的 ref 属性来定位输入。然后在您的实例上访问 $refs 属性以获取对 DOM 元素的引用。

<script>
export default {
    // ...
  mounted: function () {
    this.focusInput('nameInput');
  },
  methods: {
    // This is the method that focuses the element
    focusInput: function ( inputRef ) {
      // $refs is an object that holds the DOM references to your inputs
      this.$refs[inputRef].focus();
    },

    search: function (event) {
      this.focusInput('domainInput');
    },
  }
}
</script>

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

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

Answer 4

根据vue 2.x，你也可以在组件中本地注册"directive"来获得自动对焦。

只需在组件中编写指令：

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

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

<input type="text" v-focus>

Answer 5

在 child 元素内设置焦点

（对于那些像我一样挣扎了几个小时的人）

Parent:

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

Child (CustomInput.vue):

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

Answer 6

使用 ref 我设法像这样将输入集中在 mounted 上。

模板：

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

Javascript :

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

Answer 7

Vue 3.x

使用自定义指令。

app.directive('focus', {
    mounted(el) { 
      el.focus() 
    }
})

以下是您的使用方法：

第 1 步：

// main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)

 app.directive('focus', {
     mounted(el) { // When the bound element is inserted into the DOM...
       el.focus() // Focus the element
     }
 })

/* Optional: 
   Add a slight delay if the input does not focus.

app.directive('focus', {
    mounted(el) { // When the bound element is inserted into the DOM...
        setTimeout(() => {
            el.focus() // Focus the element
        }, 500)
    }
}) */

await router.isReady()
app.mount('#app')

然后在你的组件中：

第 2 步：

// MyInput.vue

<input v-focus>

Vue docs

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

Setting focus of an input element in vue.js

javascript

vue.js

另一种使用 Vue 2.x 和 `ref` 的解决方案。

在 child 元素内设置焦点

Vue 3.x

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

Setting focus of an input element in vue.js

javascript

vue.js

另一种使用 Vue 2.x 和 ref 的解决方案。

在 child 元素内设置焦点

Vue 3.x

另一种使用 Vue 2.x 和 `ref` 的解决方案。