Vue 3选项API：输入未达4位时禁用提交按钮功能失效问题

你的代码核心问题是输入框没有和Vue实例的password数据做双向绑定，所以输入内容不会同步更新到password变量，导致按钮的disabled判断条件password.length < 4始终基于初始的空字符串，无法随输入动态变化。另外按钮的@click="password"绑定也不正确，这会直接返回password变量的值而非执行提交逻辑。

修复后的代码 #

模板部分 #

<div class="mb-6">
  <label for="password">PIN 码</label>
  <!-- 添加 v-model 实现双向绑定 -->
  <input
    minlength="4"
    maxlength="4"
    id="password"
    type="password"
    placeholder="****"
    v-model="password" />
</div>
<div id="div-submit">
  <!-- 修正点击事件，绑定提交方法，保留禁用判断 -->
  <button
    :disabled="password.length < 4"
    @click="handleSubmit"
    id="submit"
  >提交</button>
</div>

脚本部分 #

<script>
export default {
  data() {
    return {
      password: '',
    }
  },
  methods: {
    // 新增提交处理方法
    handleSubmit() {
      // 这里写你的提交逻辑，比如打印密码或调用接口
      console.log('提交的PIN码:', this.password)
    }
  }
}
</script>

关键修复点 #

• 给输入框添加v-model="password"：这是Vue实现表单双向绑定的核心指令，输入框的内容会实时同步到data中的password变量，确保禁用状态能随输入动态更新。
• 修正按钮的点击事件：将@click="password"改为@click="handleSubmit"，并在methods中定义对应的处理函数，保证点击按钮能执行预期的提交逻辑。
• 保留minlength和maxlength：这两个属性可以在浏览器层面限制输入长度，和Vue的逻辑判断形成双重校验。

内容的提问来源于stack exchange，提问作者Roman Šnírer