vuetify 输入附加按钮加载器工作不正确

Question

我有一个电子邮件v-text-field字段（实际上我有很多，但电子邮件需要更复杂的规则），并且我使用 Vuelidate 进行表单验证。在用户输入他的电子邮件并且 Vuelidate 将其检测为有效后，我需要显示一个Check按钮，发出请求并检查用户是否存在。直到在去往服务器并返回的途中发出请求，我想在按钮上显示加载程序。这是代码：

<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;

    }

   } 

除了按钮加载器之外，一切都按预期工作，出于某种原因，在我单击Check按钮后，另一个带有预加载器的按钮出现在Check按钮之前，但加载器应该出现在同一个按钮上。

Answer 1

除了几个问题外，您的代码看起来还不错。你真的应该也收到这些错误！在您的文本字段中solo="true"，应该是:solo="true"捕获布尔值。至于按钮，v-if="!$v.user.email.$invalid()"也应该抛出错误，应该没有括号，换句话说，应该是：v-if="!$v.user.email.$invalid。顺便说一句，$touch在模板中使用也足够了。不需要做$touch()。这里有一个工作沙箱供您参考：CODESANDBOX