Estoy tratando de ejecutar una comparación de una contraseña y un campo de confirmación de contraseña dentro de un v-dialog pero no estoy seguro de cómo hacerlo.

Estoy pasando un objeto de usuario al v-dialog así:

 <confirm-dialog :dialog="dialog" :dialogTitle="dialogTitle" :dialogText="dialogText" :passwordsMatch="passwordsMatch" :user="user" @onConfirm="onConfirm" @onCancel="onCancel" />

Los accesorios se declaran en el componente de diálogo de la siguiente manera:

 @Prop() user!: object; @Prop() passwordsMatch!: boolean;

Tengo dos entradas de texto dentro de un v-dialog que tienen sus respectivos valores agregados al objeto de usuario usando v-model .

 <v-text-field v-model="user.password" label="New Password" value="Input text" ></v-text-field> <v-text-field v-model="user.confirmPassword" label="Confirm Password" value="Input text" ></v-text-field>

Esta función se llama usando para transmitir información al padre.

 <v-btn class="blue--text darken-1" text="text" @click.native="$emit('onConfirm', { user: user })" >Confirm</v-btn>

Mi lógica era verificar si las dos entradas de campo coinciden en el padre y volver a activar la función que abre el cuadro de diálogo, esta vez pasando un valor booleano al cuadro de diálogo para que el usuario sepa que las contraseñas no coinciden.

 onConfirm(user) { console.log('User after confirm ->', user) if(user.password !== user.confirmPassword) { alert('Passwords do not match') this.passwordsMatch = false // want to use this to notify user in dialog that passwords do not match this.openDialog(user) } ....// do something else }

En la función anterior, puedo ver el objeto de usuario, pero no se puede acceder a sus valores hasta que la función se haya completado. Por lo tanto, parece que el bloque if nunca se activa. Puedo ver tanto la password como los valores de confirmPassword en el objeto de usuario después de que se haya ejecutado la función, en qué etapa ignoró la falta de coincidencia y ejecutó el siguiente código.

Estoy seguro de que hay una manera más fácil de hacer esto, pero todavía estoy descubriendo Vue y cómo controlar el flujo de datos entre los componentes principales y secundarios, lo que me parece un poco complicado.

Si alguien puede ofrecer algún consejo u orientación sobre cómo se puede lograr esto, preferiblemente de una manera más simple, estaría muy agradecido.