Vue.js点击按钮后禁用手机号输入框的实现方法

操作步骤 #

• 新增独立的响应式标记变量，用来记录用户是否已经触发发送OTP的动作，比如命名为isOtpSent，默认值设为false。不建议直接修改原有disabled变量的取值，避免和它原本承载的业务禁用逻辑产生冲突。
• 修改手机号输入框的disabled绑定表达式，在原有判断条件的基础上追加逻辑或判断，让两个条件任意一个成立就触发禁用，修改后的绑定写法为：
  :disabled="disabled == 1 || isOtpSent"
• 找到按钮绑定的sendOtp方法，在方法逻辑的入口位置（也就是真正发起OTP发送请求的位置），将isOtpSent的值更新为true。依托Vue的响应式更新机制，这个状态变更会立刻同步到输入框的禁用属性上，实现点击按钮就锁死输入框的效果。

代码片段参考 #

修改完成后的输入框代码示例：

<input 
  type="text"
  id="mobile"
  v-model="mobile"
  v-model.trim="$v.mobile.$model"
  :class="{ 'is-invalid': validationStatus($v.mobile) }"
  placeholder="Enter your mobile number"
  v-validate="'required'"
  :maxlength="maxmobile"
  v-on:keypress="isMobile($event)"
  :disabled="disabled == 1 || isOtpSent"
/>

对应sendOtp方法的调整参考（选项式API写法）：

methods: {
  sendOtp() {
    // 点击触发时立刻更新状态锁死输入框
    this.isOtpSent = true
    // 保留原有发送OTP的业务逻辑
  }
}

注意：如果后续存在表单重置、OTP验证失败需要让用户重新修改手机号的场景，记得在对应的重置逻辑里把isOtpSent的值改回false，防止输入框被永久锁死无法编辑。

内容的提问来源于stack exchange，提问作者T dhanunjay