Question

我想集中讨论有错误的第一个输入。我正在使用vuelidate。

问题出在这里。$ refs.array [index]。$ el.focus（）

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

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

我有这样的混合文件

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

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

1 个答案: