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

问题描述

我有一个电子邮件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按钮之前，但是加载器应该出现在同一按钮上按钮。

有什么主意我做错了吗？感谢您的建议！

解决方法

除了几个问题之外，您的代码看起来还不错。您真的也应该为此收到错误！在您的文本字段solo="true"中，应为:solo="true"以捕获布尔值。

对于按钮，v-if="!$v.user.email.$invalid()"也应该引发错误，应该没有括号，换句话说，应该是：v-if="!$v.user.email.$invalid。

顺便说一句，在模板中也使用$touch就足够了。无需执行$touch()。

以下是一个有效的沙箱供您参考： CODESANDBOX