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

在新值出现之前，组件可能没有更新。等待它完成序列。

更新v-model时，Bootstrap-vue输入不会更新文本框内的值

1 个答案: