Bootstrap-vue的b-form-input在v-model更新时文本框值不更新的问题

我明白你遇到的困扰——原生input配合@input事件能稳稳实现「输入值小于100时自动加125」的功能，但换成Bootstrap-vue的b-form-input就偶尔掉链子。这主要是因为b-form-input对原生input做了封装，事件触发逻辑和状态同步机制和原生组件不太一样，咱们一步步搞定它：

问题根源 #

b-form-input的@input是组件自定义的事件，并非原生input事件。它内部会做值格式化、状态同步等额外处理，当你在@input回调里直接修改v-model绑定的值时，很可能和组件内部的状态更新流程冲突，导致你的修改被覆盖，出现失效的情况。而原生input的@input是直接触发，没有额外的组件内部处理，所以不会有这个问题。

解决方案 #

方案1：监听原生input事件 #

直接使用@native.input替代@input，这样就和原生input的事件触发逻辑完全一致，彻底避开组件封装带来的冲突：

<template>
  <div id="app">
    <div>
      <!-- 使用native.input监听原生输入事件 -->
      <b-form-input 
        type="number" 
        placeholder="For bootstrap-vue" 
        v-model="myObj.prop1" 
        @native.input="onProp1Change"
      />
    </div>
    <div>
      <input type="number" placeholder="Sim..." v-model="myObj.prop2" @input="onProp2Change"/>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      myObj: {
        prop1: null,
        prop2: null
      }
    }
  },
  methods: {
    onProp1Change(event) {
      // 原生事件需要从event.target.value取数值，还要处理非数字情况
      const val = Number(event.target.value);
      if (!isNaN(val) && val < 100) {
        this.myObj.prop1 = val + 125;
      }
    },
    onProp2Change(val) {
      if (val < 100 && val !== null) {
        this.myObj.prop2 = val + 125;
      }
    }
  }
}
</script>

方案2：用$nextTick延迟修改值 #

如果不想改用原生事件，也可以在修改v-model的值时用$nextTick，等b-form-input完成内部状态同步后再更新值，避免冲突：

methods: {
  onProp1Change(val) {
    if (val < 100 && val !== null) {
      // 等待组件内部处理完当前输入的状态更新
      this.$nextTick(() => {
        this.myObj.prop1 = val + 125;
      });
    }
  }
}

方案3：使用watch监听数据变化 #

最稳妥的方式是直接监听v-model绑定的数据变化，不管数据是通过输入还是其他方式修改的，都能触发调整逻辑：

<script>
export default {
  data() {
    return {
      myObj: {
        prop1: null,
        prop2: null
      }
    }
  },
  watch: {
    'myObj.prop1'(val) {
      // 确保值是有效数字且小于100
      if (!isNaN(val) && val !== null && val < 100) {
        this.$nextTick(() => {
          this.myObj.prop1 = val + 125;
        });
      }
    }
  },
  methods: {
    onProp2Change(val) {
      if (val < 100 && val !== null) {
        this.myObj.prop2 = val + 125;
      }
    }
  }
}
</script>

注意事项 #

• 处理数值时要注意NaN的情况：输入空值或者非数字内容时，type="number"的输入框会返回NaN，需要做判断避免错误。
• 用watch方案时加$nextTick更稳妥：虽然这里我们是把值改成更大的数，不会重复触发watch，但加上能避免潜在的循环更新问题。

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