专注于有错误的第一个输入。 问题。$ refs.array [0]

Question

我想专注于有错误的第一个输入。 我正在使用vuelidate。

问题在于。$ refs.array [index]。$ el.focus（）

控制台出错：未捕获（在承诺中）TypeError：无法读取未定义的属性“0”

但是，如果我将输入的名称放在数组的位置，一切正常！

我有这样的mixin文件

export default {
    async beforeRouteLeave(to, from, next) {
        if (this.isEditSchoolPage || this.isEditMode) {
            if (await this.showSavingDialog()) {

                if (this.$v && this.$v.$invalid) {
                    this.$v.$touch();
                    this.focusFirstError();
                    return;
                }

                await this.submit(true);
            }

            removeEventListener('beforeunload', this.leaveDialog);
        }
        next();
    },

    methods: {
        focusFirstError() {
            var invalidFields = Object.keys(this.$v.$params)
                .filter(fieldName => this.$v[fieldName].$invalid);

            if (invalidFields) {
                this.$refs.invalidFields[0].$el.focus();
                return;
            }
        },
    }
}

我在组件输入中放置了ref =“”

<v-form-group :validator="$v.taxRate" label="Sales Tax Rate (%)" label-required>
    <form-input-formatted type="percent" v-model="taxRate" ref="taxRate"/>
</v-form-group>

如果我更换

this.$refs.invalidFields[0].$el.focus();

同

this.$refs.taxRate.$el.focus();

它按照我的预期工作。

控制台的一些图像。 ibb.co/s36vWBQ

ibb.co/0Jqm9jD

ibb.co/rwfNJ0w

Answer 1

答案是：

this.$refs[invalidFields[0]].$el.focus();