Trying to auto-focus on the next input field after 1 character is typed.

Getting error: Property '$refs' does not exist on type 'void'.

Here is the function:

  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();
  }
};

Here is the template for context:

<div >
    <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"
    />

CodePudding user response：

Issue is in arrow function syntax, The arrow function doesn't define its own execution context. this value inside of an arrow function always equals this value from the outer function.

Vue will bind this keyword to the instance so that it will always reference the component instance. Because of this, it's really required to not use arrow functions when defining methods because they always bind this to the parent context, which is not actually the Vue instance - but the global object (the Window).

Working Demo with regular function syntax :

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>