es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

El resultado de la validación de vform de Vuetify en el watch se retrasa.

02 Jun, 2023 Programación

Tengo un formulario muy sencillo aquí:

<div id="app" class="pa-5">
  <h3>form Valid: {{ formValid }}</h3>
  <h3>input: {{ input }}</h3>
  <v-form ref="testForm" v-model="formValid">
    <v-text-field v-model="input" :rules="nameRules" required=""></v-text-field>
  </v-form>
</div>

Con una interfaz de usuario como esta:
1

Tengo una propiedad “watch” en el “input” que debería imprimir el estado de “formValid” para cada tecla pulsada:
2

Sin embargo, imprimirá “false” para la primera letra pero luego “true” para el resto. Parece que el estado de validez del formulario se retrasa una vez.
3

Supongo que está relacionado con los hooks del ciclo de vida de vue, pero no tengo idea de por dónde empezar. ¡Gracias por la ayuda!
Code Pen

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución

    El problema parece estar relacionado con el tiempo de validación del formulario. El formulario se está validando después del evento de entrada, por lo que el estado no se actualiza inmediatamente. Para solucionar esto, podemos usar el evento update:formValid en lugar del evento input para actualizar el estado de validación del formulario.

    Aquí está el código actualizado:

    <div id="app" class="pa-5">
  <h3>Formulario válido: {{ formValid }}</h3>
  <h3>Entrada: {{ input }}</h3>
  <v-form ref="testForm" v-model="formValid" @update:formvalid="formValid = $event">
    <v-text-field v-model="input" :rules="nameRules" required=""></v-text-field>
  </v-form>
</div>

    Ahora estamos usando el evento @update:formValid para actualizar la propiedad formValid. Este evento se activa después de que se haya actualizado el estado de validación del formulario, por lo que esto debería solucionar el problema.

    ¡Espero que esto ayude! Avísame si tienes alguna otra pregunta.

Comments are closed.