vue.js - 当 v-model 更新时，Bootstrap-vue 输入不会更新文本框中的值

Question

我尝试在用户输入值时创建一个输入，如果它小于 100，则该值应自动增加 125。

我可以使用简单的输入和 vue 的输入事件来完成此工作，但使用 bootstrap-vue 的输入(b-form-input)有时它不起作用。

以下是我的代码

<div id="app">
  <div>
    <b-form-input
      type="number"
      placeholder="For bootstrap-vue"
      v-model="myObj.prop1"
      @input="onProp1Change"/>
  </div>
  <div>
    <input
      type="number"
      placeholder="Simple"
      v-model="myObj.prop2"
      @input="onProp2Change"/>
  </div>
</div>

new Vue({
  el: '#app',
  data() {
    return {
      myObj: {
        prop1: null,
        prop2: null
      }
    };
  },
  methods: {
    onProp1Change(value) {
      console.log('prop1', value);
      if (Number(value) < 1) {
        return;
      }

      if (Number(value) < 100) {
        this.myObj.prop1 = Number(value) + 125;
      }
    },
    onProp2Change(event) {
      let value = event.target.value;
      console.log('prop2', value);
      if (Number(value) < 1) {
        return;
      }

      if (Number(value) < 100) {
        this.myObj.prop2 = Number(value) + 125;
      }
    }
  }
})

jsFiddle link

在 bootstrap-vue 输入中，如果您从输入 5 开始，它会更改为 130，然后如果您按退格键，它会更改为 138，但如果您再次按退格键，它会更改为 13，但它应该保持在 138。 如何制作工作？

Answer 1

它对我有用 $nextTick :

  if (Number(value) < 100) {
    this.$nextTick(() => {
        this.myObj.prop1 = Number(value) + 125;
    });
  }

在新值到来之前，组件可能尚未完成更新。这会等到它完成一个序列。