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