...

Ese v$ que se define contendrá toda la información de las validaciones que especifiquemos, así como algunos métodos. Podremos acceder a él con this.$vv$.

Validadores

Estableceremos las diferentes validaciones que queremos que se hagan sobre variables que estén incluidas en el data del componente, especificándolas en un campo validations dentro del export default defineComponent({ ... }), así:

...

Como veremos en el siguiente apartado, en el template pintaremos los casos de error en el caso de que no se cumplan las validaciones, pero inicialmente no querremos que se muestren (por ejemplo, un campo required inicialmente estará vacío, sólo mostraremos el aviso una vez el usuario haya intentado hacer submit y no haya rellenado ese campo). Para controlar esto, $v v$ contiene, para cada variable que validamos, un campo $invalid que nos dirá si en todo momento si el valor de la variable pasa las validaciones que hayamos especificado, y un campo $dirty que será false hasta que activemos las validaciones, para así poder controlar si se muestran mensajes de error o todavía no.

Para activar las validaciones, dentro del método que hayamos puesto en @submit.prevent llamaremos al método this.$vv$.$touch(), lo que hará que los campos $dirty pasen a true. Además, cuando se hace esto, también se rellena el campo $errors de cada una de las variables, por lo que un atajo para mostrar los errores puede ser consultar directamente éste.

Ejemplo de template

Teniendo en cuenta lo anterior, podemos ver este ejemplo:

<form @submit.prevent="checkSubmit" class="form">
  <!-- Nombre del titular -->
  <div class="form__row width100" style="margin-top: 1em">
    <!-- Ejemplo sin el label del campo para simplificar -->
    <!-- MensajeMensajes de error --> > 
    <div v-if="v$.nombre.$dirty && v$.nombre.$invalid">
      <div
        v-for="(error, index) in v$.nombre.$errors"
        :key="index">
      <span  class="form__error"
        >* {{ error.$message }}</divspan>
      >
    </div>
      <!-- Campo InputText --> 
    <div class="form__field width100">
      <InputText
        v-model="nombre"
        class="width100"
        maxlength="500"
        :class="
          v$.nombre.$dirty && v$.nombre.$invalid
            ? 'border-invalid'
            : ''
        "
      />
    </div>
  </div>
</form>

Como podemos ver, para mostrar el mensaje los mensajes de error se comprueba tanto si el valor de la variable nombre es inválido como que se hayan activado las validaciones, es decir, el campo dirty. Entonces, el itera directamente sobre el array $errors. El campo $errors contiene los diferentes errores de las validaciones que fallan, y cada uno de ellos contiene el campo $message con el mensaje de error que tenga definido, que es lo que se pinta.