Vue3实现输入框数值从100扣减、删除时无法回补问题

原代码问题点 #

• 计算逻辑不完整：仅在输入存在值时执行减法运算，未覆盖输入被清空（用户删除所有内容）的场景，且未以固定初始值100为统一计算基准，累计计算逻辑容易出现差值偏差。
• 变量作用域冲突：校验函数形参命名为e，与外层绑定输入值的ref变量e重名，函数内读取到的e不符合预期。
• 变量名笔误：定义的总额变量为total，赋值时误用未定义的totalPercentages变量。
• 事件绑定冗余：同时绑定keyup、blur事件做校验存在重复触发问题，响应式场景下可以用更简洁的实现。

可直接运行的修正代码 #

Vue模板部分 #

<input
  type="number"
  placeholder="Ex: 40"
  v-model="inputVal"
  required
/>
<p>剩余可用总额：{{ remain }}</p>

JS逻辑部分（Vue3 组合式API） #

import { ref, computed } from 'vue'
// 固定初始总额，作为全局计算基准，不做修改
const FIXED_TOTAL = 100
// 输入框绑定值
const inputVal = ref('')
// 剩余总额，自动跟随输入值计算
const remain = computed(() => {
  // 输入为空/输入非有效数字时，直接返回初始总额
  if (!inputVal.value || isNaN(Number(inputVal.value))) {
    return FIXED_TOTAL
  }
  // 永远用固定初始值减当前输入值计算，从根源避免累计计算的回补误差
  return FIXED_TOTAL - Number(inputVal.value)
})

逻辑说明 #

• 放弃原有“每次触发事件就做一次减法”的累计计算思路，所有计算都以恒定不变的初始值100为基准，输入值变了就重新算一次剩余值，不管是新增输入还是删除内容，计算结果永远准确，不会出现删除后数值不回补的问题。
• 用计算属性替代手动绑定事件触发计算，Vue会自动追踪输入值的变化实时更新剩余额，不需要手动绑定keyup、blur、input事件，代码更简洁，bug率更低。
• 自动处理空值场景：用户删除全部输入内容时，剩余额自动重置为100，符合预期。
• 计算前统一把输入值转为数字类型，避免字符串隐式转换导致的计算异常。

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