There are a couple of fields that I am working with:
<v-row>
<v-col cols="12" class="d-flex">
<v-text-field clearable outlined required :rules="rules.codeRules" name="code" v-model="attribute.code" label="Code"></v-text-field>
</v-col>
</v-row>
<v-row>
<v-col cols="12" class="d-flex">
<v-text-field clearable outlined required :rules="rules.nameRules" name="name" v-model="attribute.name" label="Name"></v-text-field>
</v-col>
</v-row>
In the Vuetify documentation, I noticed there are properties called error which can trigger an error state and error-messages which contain messages to be displayed.
When the form is submitted, if there are any errors on the fields, I want to trigger these properties. Is there a way to manually set a field named "code" into an error state using the error property? How can I provide a custom error message for it? Do I need to create specific variables in the data() object for each field in my form, or is there a way to directly update the properties of the field without additional variables?
Thank you!
Edit
This is what I have implemented:
<v-row>
<v-col cols="12" class="d-flex">
<v-text-field clearable outlined required :error="formErrors.code.error" :error-message="formErrors.code.errorMessages" :rules="rules.codeRules" name="code" v-model="attribute.code" label="Code"></v-text-field>
</v-col>
</v-row>
My submit method looks like this:
axios.post(postUrl, this.attribute, { Accept: "application/json" })
.then(response => {
if (response.data.success) {
Event.fire('message', {
type: 'success',
message: 'Attribute successfully saved'
});
this.$router.push('/attributes/list')
}
})
.catch(errors => {
// eslint-disable-next-line no-console
console.log(errors.response.data)
const responseErrors = errors.response.data
if (responseErrors) {
// eslint-disable-next-line no-console
console.log('Error occurred')
for (const key of Object.keys(responseErrors)) {
// eslint-disable-next-line no-console
console.log(responseErrors[key][0])
this.formErrors[key].error = true;
this.formErrors[key].errorMessages = responseErrors[key][0];
}
}
})
}
Setting
this.formErrors[key].error = true;