亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

vuetify 輸入附加按鈕加載器工作不正確

vuetify 輸入附加按鈕加載器工作不正確

搖曳的薔薇 2022-12-29 14:00:58
我有一個電子郵件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按鈕之前,但加載器應該出現在同一個按鈕上。
查看完整描述

1 回答

?
藍山帝景

TA貢獻1843條經驗 獲得超7個贊

除了幾個問題外,您的代碼看起來還不錯。你真的應該也收到這些錯誤!在您的文本字段中solo="true",應該是:solo="true"捕獲布爾值。

至于按鈕,v-if="!$v.user.email.$invalid()"也應該拋出錯誤,應該沒有括號,換句話說,應該是:v-if="!$v.user.email.$invalid

順便說一句,$touch在模板中使用也足夠了。不需要做$touch()。

這里有一個工作沙箱供您參考:CODESANDBOX


查看完整回答
反對 回復 2022-12-29
  • 1 回答
  • 0 關注
  • 130 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號