The documentation states that by using a flag on the value of a field, I should be able to obtain a boolean. For example:
computed: {
isFormDirty() {
return Object.keys(this.fields).some(key => this.fields[key].dirty);
}
},
I am working on disabling the submit button for my form until all fields are valid. The structure of the input attributes is as follows:
type="text", @change="updateForm", name="surname", v-validate="'required'", v-model="form.surname", id="surname"<form> tag.
The updateForm method looks like:
updateForm(event): void {
this.$store.commit('updateForm', this.form)
}where the 'updateForm' mutation appears as follows:
updateForm(state, data) {
state.form = data;
},The submit button is designed as follows:
<button type="submit" :disabled="isFormValid">Submit</button>with isFormValid being a computed property structured as:
get isFormValid(): boolean {
return Object.keys(this.form).some(key => this.form[key].invalid);
}The form data is also a computed property:
get form(): FormData {
return this.$store.getters.getForm();
}The issue arises when attempting to access the values of the fields with invalid flags inside the isFormValid() function using
console.log(Object.keys(this.form).map(key => this.form[key])console.log(this.$validator.fields.items.map(item => item.value)