尝试禁用按钮时出错，直到用户在 Vuejs 的 otp 字段中输入数字？

Question

 otp_value: '', isFadeout: false, verifyOtp() { this.disabled = true; this.otpBtnClicked = false; this.verified = true; },

 <input
                              class="otp-number-login"
                              type="number"
                              v-for="(key, i) in activationKeyFields"
                              :key="i"
                              :data-length="key.length"
                              :data-index="i"
                              :ref="`input-${i}`"
                              v-model="key.value"
                              @input="handleActivationInput($event)"
                              placeholder="-"
                              maxlength="1"
                            />
 <button
                            class="verify-button-otp pxy_0"
                            v-on:click="isFadeout = true"
                            :disabled="otp_value.length < 4"
                            @click="verifyOtp"
                            id="verifybtn"
                          >
                            VERIFY
                          </button>

我有 otp 字段后跟一个按钮。 otp 的逻辑工作正常。

但问题是，在用户在字段中输入 otp 编号并单击验证按钮后，isFadeout 不起作用。 如果我关闭了 otp 文件，如果我再次单击验证而不输入数字，则它正在验证。

Answer 1

问题是你的按钮

 <button
  class="verify-button-otp pxy_0"
  :disabled="otp_value.length < 4"
  @click="verifyOtp"
  id="verifybtn"
>

verifyOpt() {
  isFadeout = true;
  ...
}

您同时拥有v-on:click和@click 。 @Click 只是 v-on:click 的简写，因此您的 @click 会覆盖您的 isFadeout 逻辑。 只需将您的isFadeout = true放在verifyOpt方法中即可