1

我试图在用户输入一个值时创建一个输入，如果它小于 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链接

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

4

1 回答 1

3

它适用于我$nextTick：

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

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

于 2018-05-03T12:07:10.200 回答