One of the fields in my form is an email input with complex validation rules. I'm using Vuelidate for form validation, and once the user enters a valid email, I want to display a 'Check' button to verify if the user exists. While the server processes the request, I'd like to show a loader on the same button. Below is the code snippet:
<template>
<v-text-field
v-model="user.email"
type="email"
label="Email"
solo="true"
:error-messages="emailErrors"
@input="$v.user.email.$touch()"
@blur="$v.user.email.$touch()"
>
<template v-slot:append>
<v-btn
v-if="!$v.user.email.$invalid()"
class="ma-2"
:loading="user.emailVerificationInProgress"
color="#ad5697"
@click="checkUserRegistration()"
>Check </v-btn>
</template>
</v-text-field>
<tempale>
<script>
import {validationMixin} from 'vuelidate'
import {required, email} from 'vuelidate/lib/validators'
export default {
mixins: [validationMixin],
validations: {
user: {
email: {required, email},
}
},
data: () => ({
user: {
email: null,
emailVerificationInProgress: false
}
}),
methods: {
checkUserRegistration() {
this.$v.user.email.$touch();
if (this.$v.user.email.$invalid) return;
this.user.emailVerificationInProgress = true;
setTimeout(
() => {
// simulate request
this.user.emailVerificationInProgress = false;
},
3000
)
},
},
computed: {
emailErrors() {
const errors = []
if (!this.$v.user.email.$dirty) return errors
!this.$v.user.email.email && errors.push('Invalid email provided')
!this.$v.user.email.required && errors.push('Email is required.')
return errors;
}
}
Everything works correctly except for the button loader behavior. After clicking on the 'Check' button, a different button with a preloader appears instead of the expected loader on the same button.