managing vuelidate validations in vuetify
I came up with the following solution to handle generic validations:
function handleErrors(fieldName, vueObj) { const errors = [] if (!vueObj.$v[fieldName].$dirty) return errors if ('email' in vueObj.$v[fieldName]) { !vueObj.$v[fieldName].email && errors.push('This email address is invalid') } if ('required' in vueObj.$v[fieldName]) { !vueObj.$v[fieldName].required && errors.push('This field is required') } if (fieldName in vueObj.serverErrors) { vueObj.serverErrors[fieldName].forEach(error => { errors.push(error) }); } return errors}Then it can be used like this in your Vue object:
...computed: { emailErrors () { return handleErrors('email', this) }, },...Then you have to handle the possible error types in handleError (required and email validators are handled in the example). I'm also using this to show field errors returned from the backend.
I'm also curious if this can be solved easier!