Learning Vue and looking for a way to dynamically remove validation errors from input fields as the value changes? I keep track of input values in an object named fields within data(), like this (excerpt):
fields: {
email_type: '',
date_of_birth: '',
country_of_birth: '',
}
Validation errors are stored in an object called errors.
After form submission, the error object populates with messages. An example:
{"email_type":["The email type field is required."],
"date_of_birth":["The date of birth field is required."],
"country_of_birth":["The country of birth field is required."]
To display validation errors below the input, I use:
<small class="font-weight-bold help text-danger" v-if="errors.{{$name}}" v-text="errors.{{$name}}[0]"></small>Sample input code (with Laravel blade's "name" insertion) using {{$name}}:
<input @change="removeValidationError(errors.{{$name}})" v-model="fields.{{$name}}" class="form-control" value="">The removeValidationError() method aims to clear that specific error from the errors object but it's not working. This is the current implementation:
removeValidationError : function(errorField){
if(errorField !== undefined){
console.log(errorField);
errorField = "";
delete errorField;
}
},
I've attempted clearing and deleting the field without success. No error messages appear in the console, yet errorField does show the error message.
(Extra detail: Validation is handled by Laravel.)
Looking for advice on the best approach here. Thank you!