Vue.js中输入框修改确认后无法恢复原值的问题求助

我来帮你搞定这个问题！首先咱们先捋清楚为什么你尝试重置值后没生效：

问题根源 #

1. 单向绑定导致视图不同步：你用了:value单向绑定输入框，用户手动修改输入框后，DOM值已经改变，但组件不会自动根据this.drivers[index].driverNumerator的变化更新输入框（因为单向绑定只在初始化和数据主动变化时更新视图，用户手动改DOM不会触发反向同步）。
2. 重置值格式不匹配：你直接把原始数字lastValue赋值给输入框，但输入框初始显示的是$utils.formatNumber格式化后的字符串，格式不匹配导致显示不对。
3. 直接操作DOM不够可靠：用document.getElementById获取动态渲染的元素容易出问题，尤其是Vue的响应式机制可能会覆盖手动修改的DOM值。

解决方案 #

方案1：修复现有代码，正确重置输入框

不需要大改代码，只需要把重置输入框的值改成格式化后的原始值，同时确保数据和视图一致：

修改取消和错误回调中的重置代码：

// 取消修改时的处理
} else {
  this.drivers[index].driverNumerator = lastValue;
  // 获取输入框元素，设置格式化后的原始值
  const inputEl = document.getElementById('numeratorDriver_' + index);
  if (inputEl) {
    inputEl.value = this.$utils.formatNumber(lastValue);
  }
}

// 请求失败时的处理
} else {
  this.drivers[index].driverNumerator = lastValue;
  const inputEl = document.getElementById('numeratorDriver_' + index);
  if (inputEl) {
    inputEl.value = this.$utils.formatNumber(lastValue);
  }
}

方案2：改用双向绑定（更推荐的Vue最佳实践）

用@input实时同步输入框和数据，这样取消修改时只需要恢复数据，Vue会自动更新视图，完全不用手动操作DOM：

1. 修改模板中的b-input：

<b-td data-label="Numerator">
  <b-input 
    :id="'numeratorDriver_'+index" 
    class="driver-numerator text-right" 
    type="text" 
    :value="$utils.formatNumber(driver.driverNumerator ?? 0)"
    @input="syncDriverNumerator($event, index)"
    @blur="calculatePricingDriver($event, index)" 
  />
</b-td>

2. 添加同步数据的方法：

function syncDriverNumerator(event, index) {
  // 可选：添加输入验证，只允许数字输入
  const cleanValue = event.target.value.replace(/[^0-9.]/g, '');
  // 实时同步输入框值到数据
  this.drivers[index].driverNumerator = cleanValue ? Number(cleanValue) : 0;
}

3. 修改calculatePricingCustomDriver中的取消逻辑：

} else {
  // 直接恢复原始值，Vue会自动更新输入框显示
  this.drivers[index].driverNumerator = lastValue;
}

方案3：用Vue的ref替代getElementById（如果必须操作DOM）

如果不想改绑定方式，可以用Vue的ref更可靠地获取输入框组件：

1. 给b-input添加ref属性：

<b-input 
  :ref="'numeratorDriver_' + index"
  :id="'numeratorDriver_'+index" 
  class="driver-numerator text-right" 
  type="text" 
  :value="$utils.formatNumber(driver.driverNumerator ?? 0)"
  @blur="calculatePricingDriver($event, index)" 
/>

2. 修改重置逻辑：

} else {
  this.drivers[index].driverNumerator = lastValue;
  // 通过ref获取组件，再拿到原生输入框元素
  const inputComponent = this.$refs['numeratorDriver_' + index];
  if (inputComponent) {
    inputComponent.$el.value = this.$utils.formatNumber(lastValue);
  }
}

额外注意点 #

• 确保$utils.formatNumber能正确处理0或undefined的情况（你的代码里已经处理了driver.driverNumerator === undefined的情况，这点很好）。
• axios回调中用了箭头函数，确保this指向组件实例，这部分没问题。

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