How to disable button until condition satisfy in Vuejs?

Question

 isMobile(e) { let char = String.fromCharCode(e.keyCode); // Get the character if (/^[0-9]+$/.test(char)) return true; // Match with regex else e.preventDefault(); // If not match, don't add to input text },

 export default { name: "HelloWworld", data: function () { return { mobdis: false, mobile: "", maxmobile: 10, }; }, validations: { computed: { isDisabled: function () { return.this;mobdis, }, }, },

 <input class="input-section label-set" style="padding-left: 75px" type="text" id="mobdis" v-model="mobdis" v-model.trim="$v.mobile.$model":class="{ 'is-invalid': validationStatus($v.mobile) }" placeholder="Enter registerd mobile number":maxlength="maxmobile" v-on:keypress="isMobile($event)" /> <div v-if=".$v.mobile.minLength" class="invalid-feedback"> Kindly check phone {{ $v.mobile.$params.maxLength.min }} number: </div> <button class="sendotp-button":disabled="isDisabled" v-on:click="isHidden = true" > SEND </button>

How to set Maxlength condition for button in Vuejs?

Disabling of button is working fine, but maxlength condition is not satisfying, Even if i try to enter 1 digit, button is enabling..

Added the regex code also.

Answer 1

try validating the mobdis with js

something like this:

export default {
  name: "HelloWworld",

  data: function () {
    return {
      mobdis: false,
      mobile: "",
      maxmobile: 10,
    };
  },

  methods: {
    isMobile(event) {
      /* other codes */
      this.$nextTick(function () {
        if (event.value.length > 9) {
          // check if this field (number) has value lenght 10
          this.mobdis = true;
        } else {
          this.mobdis = false;
        }
      });
      /* other codes */
    },
  },

  /* validations: {
    computed: {
      isDisabled: function () {
        return !this.mobdis;
      },
    },
  }, */
};