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

Admin 1
Viewed 1183

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 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"
    />
vuejs3 vue.js typescript html javascript
2 Answers

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>

user_41163000

My Vue3 approach to eliminate .this keyword.

    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"
    />
Admin1
Related