如何在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>

如何在 Vuejs 中為按鈕設置 Maxlength 條件？

禁用按鈕工作正常，但 maxlength 條件不令人滿意，即使我嘗試輸入 1 位，按鈕正在啟用..

還添加了正則表達式代碼。

Answer 1

嘗試用js驗證mobdis

像這樣的東西：

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;
      },
    },
  }, */
};