I am working on focusing the first input that has an error, using vuelidate.
The issue lies with this.$refs.array[index].$el.focus()
An error in the console is shown as: Uncaught (in promise) TypeError: Cannot read property '0' of undefined."
However, if I use the ref name of the input instead of array, everything works fine!
In my mixin file, I have the following:
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;
}
},
}
}
I have added ref="" in the component input as shown below:
<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>
By replacing
this.$refs.invalidFields[0].$el.focus();With
this.$refs.taxRate.$el.focus();
The functionality behaves as expected.
Attached are some images from the console: ibb.co/s36vWBQ
ibb.co/0Jqm9jD
ibb.co/rwfNJ0w