如何禁用按钮，直到条件满足在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条件不满意，即使我尝试输入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;
},
},
}, */
};