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

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

vuetify input appended button loader working incorrectly

javascript

vue.js

vuetify.js

vuelidate