Использование Vue JS $ refs в функции

Question

Я установил метод Vue JS, который должен автоматически фокусироваться на следующем поле ввода, если достигается максимальная длина поля. Я пытаюсь передать поле для фокусировки через функцию, но она не работает

Я пробовал использовать различные настройки, похоже, сработает, если я передам фактическую ссылку поля, но не через функцию

Метод:

/**
         * Switch fields
         */
        switchToField(fieldSwitchName, fieldValue, fieldLength) {
          if (String(this.fieldValue).length >= fieldLength) {
            this.$refs.fieldSwitchName.focus();
          }
        }

HTML:

<div class="form-row">
                    <div class="form-group col">
                      <input v-on:keyup="switchToField(AppDOBMonth, formData.AppDOBDay, 2)" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" v-model="formData.AppDOBDay" name="data[ApplicationPayday][AppDOBDay]" id="AppDOBDay" v-validate="'required|numeric|max:2|min:2|max_value:31'" type="number" maxlength="2" pattern="[0-9]*" inputmode="numeric" class="form-control" placeholder="DD" @change="formData.AppDOBDay = leadingZeros(formData.AppDOBDay)">
                    </div>
                    <span class="dob-divider text-muted">/</span>
                    <div class="form-group col">
                      <input ref="AppDOBMonth" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" v-model="formData.AppDOBMonth" name="data[ApplicationPayday][AppDOBMonth]" id="AppDOBMonth" v-validate="'required|numeric|max:2|min:2|max_value:12'" type="number" maxlength="2" pattern="[0-9]*" inputmode="numeric" class="form-control" placeholder="MM" @change="formData.AppDOBMonth = leadingZeros(formData.AppDOBMonth)">
                    </div>
                  </div>

Мой код должен передавать значение fieldSwitchName в this.$refs.fieldSwitchName.focus();, но, похоже, он ищет fieldSwitchName ref, а не передаваемое значение.

Что мне здесь не хватает?

Answer 1

Если switchToField является переменной, вам нужно вызвать $ ref как массив:

switchToField(fieldSwitchName, fieldValue, fieldLength) {
    if (String(this.fieldValue).length >= fieldLength) {
        this.$refs[fieldSwitchName].focus();
    }
}

Answer 2

Используя нотацию ., вы прямо указываете имя, которое вы указали после оператора . для объекта JS.

Чтобы динамически назначить ключ доступа к объекту, вам потребуетсятакой подход:

this.$refs[fieldSwitchName].focus()