Error when trying to disable button until user input numbers in otp field in Vuejs?

  javascript, vue.js
         verifyOtp() {

  this.disabled = true;

  this.otpBtnClicked = false;

  this.verified = true;
},
 otp_value: '', 
 isFadeout: false,
 activationKeyFields: [
        { length: 1, value: '' },
        { length: 1, value: '' },
        { length: 1, value: '' },
        { length: 1, value: '' },
      ],

 activationKey() {
      let value = '';
      for (let field of this.activationKeyFields) {
        value += field.value;
      }
      return value;
    },
    
  handleActivationInput(e) {
      // Grab input's value
      let value = e.target.value;
      // Grab data-index value
      let index = parseInt(e.target.dataset.index);
      // Grab data-length value
      let maxlength = e.target.dataset.length;      
      
      if (this.activationKeyFields[index].value.length > maxlength) {
        e.preventDefault();
        this.activationKeyFields[index].value = value.slice(0, 1);
        try {
          this.$refs[`input-${parseInt(index + 1)}`][0].focus();
        } catch (e) {}
        return;
      }

        // Shift focus to next input field if max length reached
        if (value.length >= maxlength) {          
          if (typeof this.activationKeyFields[index + 1] == 'undefined') {
            e.preventDefault();
            return;
          }
          this.$refs[`input-${parseInt(index + 1)}`][0].focus();
          e.preventDefault();
        }
        else{
          if (typeof this.activationKeyFields[index - 1] == 'undefined') {
              e.preventDefault();
              return;
            }
            this.$refs[`input-${parseInt(index - 1)}`][0].focus();
            e.preventDefault();
        }
      },
 <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>

I am having otp field followed by a button. Logic for the otp is working fine.

But the issue is, After user entering the otp number in fields, and clicking on the verify button isFadeout is not working. and once if i close the otp filed and once again if i click on verify without entering number it is verifying.

Source: Ask Javascript Questions

LEAVE A COMMENT