Ввод Bootstrap-vue не обновляет значение внутри текстового поля при обновлении v-модели - PullRequest
Новая
       11

Ввод Bootstrap-vue не обновляет значение внутри текстового поля при обновлении v-модели

0 голосов
/ 03 мая 2018

Я пытаюсь создать ввод, когда пользователь вводит значение, и если оно меньше 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, затем, если вы нажмете клавишу Backspace, оно изменится на 138, но затем, если вы нажмете клавишу Backspace, снова изменится на 13, но должно остаться на 138. Как это сделать работа

1 Ответ

0 голосов
/ 03 мая 2018

У меня это работает с $nextTick: 

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

Компонент, вероятно, не завершил обновление, прежде чем появилось новое значение. Он ожидает завершения последовательности.

...