Bootstrap-vue 输入在更新 v-model 时不更新文本框中的值

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;
    });
  }

组件可能在新值进来之前没有完成更新。这会等到它完成一个序列。

Bootstrap-vue 输入在更新 v-model 时不更新文本框中的值

Bootstrap-vue input doesn't update value inside textbox when v-model is updated

vue.js

bootstrap-4

bootstrap-vue