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

【问题标题】：vuetify input appended button loader working incorrectlyvuetify 输入附加按钮加载器工作不正确
【发布时间】：2020-11-30 20:46:51
【问题描述】：

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

【问题讨论】：

Dubyk 能否请您在 codepen 中重现此问题，这样会更容易解决您的问题

标签： javascript vue.js vuetify.js vuelidate

【解决方案1】：

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

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

顺便说一句，在模板中使用$touch 就足够了。不用$touch()。

这是一个供您参考的工作沙盒：CODESANDBOX

【讨论】：