属性“$refs”在类型 'void' 上不存在

Question

尝试在键入 1 个字符后自动聚焦到下一个输入字段。

出现错误：属性 '$refs' 在类型 'void' 上不存在。

函数如下：

  setup() {

const autoFocusNextInput = (event, max: number) => {
  if (event.target.value.length === max) {
    const nextElement =
      this.$refs[`input-${Number(event.target.dataset.index) + 1}`];
    if (nextElement) nextElement.focus();
  }
};

这是上下文模板：

<div class="d-flex flex-wrap justify-content-between">
    <Field
      class=
      type="text"
      name="1"
      maxlength="1"
      ref="input-0"
      data-index="0"
      @input="autoFocusNextInput($event, 1)"
      autocomplete="off"
    />
    <Field
      class=
      type="text"
      name="2"
      maxlength="1"
      ref="input-1"
      data-index="1"
      @input="autoFocusNextInput($event, 1)"
      autocomplete="off"
    />

Answer 1

箭头函数语法中存在问题，箭头函数未定义其自己的执行上下文。 this 箭头函数内部的值始终等于外部函数的 this 值。

Vue 会将 this 关键字绑定到实例，以便它始终引用组件实例。因此，确实需要在定义方法时不要使用箭头函数，因为它们总是将 this 绑定到父上下文，这实际上不是 Vue 实例 - 而是全局对象 (the Window)。

使用常规函数语法的工作演示：

new Vue({
  el:'#app',
  methods: {
    autoFocusNextInput(event, max) {
      if (event.target.value.length === max) {
        const nextElement = this.$refs[`input-${Number(event.target.dataset.index) + 1}`];
        if (nextElement) nextElement.focus();
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id='app'>
    <input
      type="text"
      name="1"
      maxlength="1"
      ref="input-0"
      data-index="0"
      @input="autoFocusNextInput($event, 1)"
      autocomplete="off"
    />
    <input
      type="text"
      name="2"
      maxlength="1"
      ref="input-1"
      data-index="1"
      @input="autoFocusNextInput($event, 1)"
      autocomplete="off"
    />
</div>

Answer 2

我的 Vue3 消除 .this 关键字的方法。

    const autoFocusNextInput = (event) => {
  if (event.target.value.length === 1) {
    const nextInput = event.target.nextElementSibling;
    if (nextInput) {
      nextInput.focus();
    } else {
      event.target.blur();
    }
  }
};


<Field
      class=""
      type="text"
      name="input1"
      maxlength="1"
      @input="autoFocusNextInput($event)"
      autocomplete="off"
      autofocus

    />
    <Field
      class=""
      type="text"
      name="input2"
      maxlength="1"
      @input="autoFocusNextInput($event)"
      autocomplete="off"
    />

属性“$refs”在类型 'void' 上不存在

Property '$refs' does not exist on type 'void'

html

javascript

typescript

vue.js

vuejs3