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引用而不是传递值。

我在这里想念什么？

Answer 1

使用.表示法，您直接指向JS对象上.运算符之后提供的名称。

要动态分配访问对象密钥，您将需要以下方法：

this.$refs[fieldSwitchName].focus()

Answer 2

如果 switchToField 是变量，则需要调用 $ ref 作为数组：

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

在函数中使用Vue JS $ refs

2 个答案: