vuetify input appended button loader working incorrectly

I have an email v-text-field field (I have a lot more actually, but email requires more complex rules), and I use Vuelidate for form validation. And after the user input his email and Vuelidate detect it as a valid I need to show a Check button, to make a request and check if user exists or not. Till request on his way to the server and back, I want to show the loader on the button. Here is the code:

     <template v-slot:append>
        >Check </v-btn>

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() {
      if (this.$$invalid) return;
      this.user.emailVerificationInProgress = true;
          () => {
            // simulate request
            this.user.emailVerificationInProgress = false;
   computed: {
     emailErrors() {
      const errors = []
      if (!this.$$dirty) return errors
      !this.$ && errors.push('Invalid email provided')
      !this.$ && errors.push('Email is required.')

      return errors;

All is working as expected except the button loader, for some reason after I click on the Check button, another button with preloader appearing before the Check button, but the loader should appear on the same button.


Your code looks alright, besides a couple issues. You really should also receive error for these! in your text field solo="true", should be :solo="true" to capture the boolean value.

As for the button, v-if="!$$invalid()" should throw error too, should be without parenthesis, in other words, it should be: v-if="!$$invalid.

By the way, also using $touch in template is enough. No need to do $touch().

Here’s a working sandbox for your reference: CODESANDBOX