Vue3 Options API下输入框低于4无法重复重置为4的问题求解

方案1：输入事件直接处理（推荐） #

跳过watcher，直接在输入阶段修正值并同步DOM，从根源避免触发问题：

<template>
  <input 
    type="number" 
    :value="inputValue" 
    @input="handleInput"
  />
</template>

<script>
export default {
  data() {
    return {
      inputValue: 4
    }
  },
  methods: {
    handleInput(e) {
      const inputVal = Number(e.target.value);
      // 处理空值或非数字输入
      const finalVal = isNaN(inputVal) ? 4 : Math.max(inputVal, 4);
      this.inputValue = finalVal;
      // 强制同步输入框显示值，避免残留无效内容
      e.target.value = finalVal;
    }
  }
}
</script>

方案2：用computed双向绑定替代watcher #

利用computed的get/set特性，自动完成值的校验和修正：

<template>
  <input type="number" v-model="adjustedInput" />
</template>

<script>
export default {
  data() {
    return {
      rawInput: 4
    }
  },
  computed: {
    adjustedInput: {
      get() {
        return this.rawInput;
      },
      set(val) {
        const numVal = Number(val);
        // 校验并修正值
        this.rawInput = isNaN(numVal) || numVal < 4 ? 4 : numVal;
      }
    }
  }
}
</script>

用户输入时setter自动修正值，getter返回正确结果，视图会自动同步，无需额外触发更新。

方案3：修复watcher触发逻辑 #

如果必须保留watcher，可通过临时变更值触发检测：

<script>
export default {
  data() {
    return {
      inputValue: 4
    }
  },
  watch: {
    inputValue(newVal) {
      const numVal = Number(newVal);
      if (!isNaN(numVal) && numVal < 4) {
        // 先设临时值触发watcher，再通过nextTick修正为目标值
        this.inputValue = undefined;
        this.$nextTick(() => {
          this.inputValue = 4;
        });
      }
    }
  }
}
</script>

这种方式通过“先改后修正”的操作让watcher检测到值变化，从而触发视图更新。

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