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

Question

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

这是我的代码：

this.$$.nameInput.focus();

我尝试this.$els.nameInput.focus();和this.$$了解我可以在线找到的重点，但this.$els未定义，decimal? foodCount = dbContext.fad_userFoods.Where(uf => uf.dateAdded == thisDate && uf.userID == thisGuid).Sum(uf=>(decimal?)uf.quantityAmount ?? 0m);为空。

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

感谢您的帮助。

Answer 1

在vue 2.x中，您可以使用@EdChum解决此问题。

v-focus

然后，您可以对输入和其他元素使用<input v-focus> 属性：

 private void textBox1_TextChanged(object sender, EventArgs e)
    {
      {
        if ((textBox1.Text.Length) == 1)
        {
            textBox1.Text = textBox1.Text[0].ToString().ToUpper();
            textBox1.Select(2, 1);

        }
      }
    }

Answer 2

有几个问题。

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

<input v-el:input-element/>

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

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

其次，自动对焦似乎不适用于Firefox（43.0.4），至少在我的机器上。一切都在Chrome上运行良好，并且按预期进行了重点关注。

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

在子元素内设置焦点

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

父母：

const Register = props => {

    const { enqueueSnackbar } = useSnackbar();

    const handleSubmit = values => {
      console.log(values)
    }

     const {
        values,
        touched,
        errors,
        isSubmitting,
        handleChange,
        handleBlur,
        // Removed handleSubmit from here
    } = props;

    return (
         <Form onSubmit={handleSubmit} className={classes.form} noValidate>
    ...
    )

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

CustomInput.vue

Answer 5

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

模板：

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

Javascript：

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

Answer 6

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

只需在组件中写入指令：

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

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

<input type="text" v-focus>