Luego de consultar con especialistas en el tema, programadores de varias ramas y maestros hemos dado con la solución al problema y la compartimos en este post.
Solución:
Realmente nunca pude acostumbrarme a la forma en que Vuelidate hace las cosas, pero, en términos generales, funciona así: https://monterail.github.io/vuelidate/#sub-basic-form
Configurarlo de esta manera le permite tener una validación para cada entrada/elemento del formulario y luego una verificación general para ver si el formulario está “sucio” y/o “no válido”
form:
"name":
"required": false,
"$invalid": true,
"$dirty": false,
"$error": false,
"$pending": false,
"$params":
"required":
"type": "required"
,
"Age":
"required": false,
"$invalid": true,
"$dirty": false,
"$error": false,
"$pending": false,
"$params":
"required":
"type": "required"
,
"$invalid": true, <------- This is what you are after for valid/invalid
"$dirty": false, <------- This is what you are after to see if the form has been used.
"$error": false, <------- This checks both invalid and dirty
"$pending": false,
"$params":
"nestedA": null,
"nestedB": null
En cuanto al uso de esto en la práctica, una opción sería llamar al evento de forma de validación al enviar.
@click.prevent="validateform"
Luego cree un método de forma de validación en su instancia de vue que verifique
$v.form.$invalid or $v.form.$error
luego muestre los errores o llame al método de envío real
Luego, lo único que debe hacer después de configurar las validaciones es llamar a un método que validará los errores. Así que sigue a continuación:
El método:
validate ()
this.$v.$touch() //it will validate all fields
if (!this.$v.$invalid) //invalid, becomes true when a validations return false
//you dont have validation error.So do what u want to do here
Sección de Reseñas y Valoraciones
Si tienes algún reparo o capacidad de aclarar nuestro post te sugerimos ejecutar una explicación y con gusto lo ojearemos.