Vue1中v-model绑定input仅能输入单字符、多字符变null问题求解

数据老陈

2026-9-2

问题根因

这个问题是Vue 1.x响应式机制特性和代码实现不匹配导致的，核心触发点有三个：

未提前初始化响应式属性：Vue 1.x无法自动侦测对象/数组上动态新增的属性，你在计算差值时直接给diff对应的comment属性赋值，如果该属性没有在数据初始化阶段预先定义，Vue不会为它生成响应式的getter/setter。第一次输入单个字符时，diff字段还未被赋值，不会触发额外更新；输入第二个字符时，上一次计算已经把diff属性动态挂载到对象上，这次赋值会打断当前输入框v-model的同步流程，导致Vue内部更新队列错乱，把还没完成同步的输入值重置为初始的null。
直接赋值绕过响应式机制：代码里直接通过对象属性赋值的方式修改diff值，没有走Vue提供的响应式赋值API，会导致Vue判定数据状态和视图不一致，触发强制回滚。
未做类型转换：输入框返回的默认值是字符串类型，直接用字符串做大小比较、减法运算时，多字符输入的中间态很容易触发隐式转换得到NaN，Vue 1.x处理v-model绑定时遇到NaN值会自动重置为null，直接清空输入框内容。

修复方案

按以下步骤调整即可解决问题：

提前初始化所有响应式字段
拿到athlete和testData数据的第一时间，遍历所有行的dx、sx、diff三个字段，预先初始化comment属性，保证Vue在初始化阶段就完成所有属性的响应式劫持，禁止动态新增未声明的属性。初始化参考代码：

// 数据加载完成后立即执行初始化
Object.keys(this.testData.edf).forEach(groupName => {
  const currentGroup = this.testData.edf[groupName]
  ;['dx', 'sx', 'diff'].forEach(fieldType => {
    const fieldId = currentGroup[fieldType].id
    if (!this.athlete.inputs[fieldId]) {
      this.$set(this.athlete.inputs, fieldId, {})
    }
    if (typeof this.athlete.inputs[fieldId].comment === 'undefined') {
      this.$set(this.athlete.inputs[fieldId], 'comment', '')
    }
  })
})

改造差值计算逻辑
所有输入值先做数字类型校验，赋值时统一使用$set方法触发响应式更新，避免直接操作原生对象属性。修复后的calcDiff代码：

calcDiff: function(inputPath) {
  const pathSeg = inputPath.split('.')
  const groupKey = pathSeg[0]
  const idSeg = pathSeg[2]
  const currentGroup = this.testData.edf[groupKey]
  
  // 取值后转数字，过滤非有效数字的输入
  const dx = Number(this.athlete.inputs[currentGroup.dx[idSeg]].comment)
  const sx = Number(this.athlete.inputs[currentGroup.sx[idSeg]].comment)
  if (isNaN(dx) || isNaN(sx)) return

  const diff = Math.abs(dx - sx)
  // 通过$set赋值，保证响应式更新正常触发
  this.$set(
    this.athlete.inputs[currentGroup.diff[idSeg]],
    'comment',
    diff
  )
}

给输入框加修饰符优化
给dx、sx对应的输入框添加v-model.number修饰符，绑定值会自动转为数字类型，从根源避免字符串隐式转换的异常；如果不需要逐字符实时计算，可以再加lazy修饰符，等输入框失焦后再触发值更新和差值计算，进一步降低更新队列冲突的概率。示例：

<input type="number" v-model.number="athlete.inputs[testData.edf.abdother.dx.id].comment">
<input type="number" v-model.number="athlete.inputs[testData.edf.abdother.sx.id].comment">

内容的提问来源于stack exchange，提问作者Fabio R.