javascript - Egenskapen '$refs' finns inte på typen 'void'

Försöker att automatiskt fokusera på nästa inmatningsfält efter att 1 tecken har skrivits.

Får fel: Egenskapen '$refs' finns inte på typen 'void'.

Här är funktionen:

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

Här är mallen för sammanhang:

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

Svar #1

Problemet ligger i syntaxen för arrow-funktioner. Arrow-funktionen definierar inte sitt eget exekveringskontext. this-värdet inuti en arrow-funktion är alltid lika med this-värdet från den yttre funktionen.

Vue kommer att binda this-nyckelordet till instansen så att det alltid refererar till komponentinstansen. På grund av detta är det verkligen nödvändigt att inte använda pilfunktioner när man definierar metoder eftersom de alltid binder this till den överordnade kontexten, vilket faktiskt inte är Vue-instansen - utan det globala objektet (fönstret).

Arbetande demo med vanlig funktionssyntax :

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>

Svar #2

Min Vue3-metod för att eliminera .this-nyckelordet.

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