Восстановите входное значение, если модель отклоняет изменения - PullRequest
Новая
       9

Восстановите входное значение, если модель отклоняет изменения

0 голосов
/ 03 ноября 2018

У меня есть текстовый ввод, который позволяет пользователю вводить число с максимум 3 цифрами после десятичной точки: 

<v-text-field type="text" :value="num" @change="changeNum($event)" />
<p>{{ num }}</p>

...

export default {
  data: () => ({
    num: 0
  }),
  methods: {
    changeNum(e) {
      let v = parseFloat(e);
      if (!isNaN(v)) {
        this.num = parseFloat(v.toFixed(3));
      }
    }
  }
};

Если я наберу '123.456', то num = 123.456. Если я добавлю текст '789', то ввод будет содержать 123.456789, но num = 123.456. Таким образом, пользователь может подумать, что изменения были применены, но это не так ...

Как я могу принудительно обновить вход, если changeNum не удается?

Ответы [ 3 ]

0 голосов
/ 04 ноября 2018

Я думаю, что $forceUpdate должен решить вашу проблему .. 

methods: {
    changeNum(e) {
      let v = parseFloat(e);
      if (!isNaN(v)) {
        this.num = parseFloat(v.toFixed(3));
        this.$forceUpdate();
      }
    }
}
0 голосов
/ 04 ноября 2018

Вы можете достичь своего варианта использования, используя только v-model.lazy для изменения данных после выхода из текстового поля, и свойство watch, которое сохраняет старое и новое значение, что позволяет нам контролировать введенное значение после фокусировки где-то еще. 

new Vue({
  el: '#app',
  data: () => ({
    num: 0
  }),

  watch: {
    num(newv, oldv) {
      let v = parseFloat(newv);
      if (!isNaN(v)) {
        this.num = parseFloat(v.toFixed(3));
      } else {
        this.num = oldv;
      }

    }
  }
})
#app {
  padding: 20px;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="description" content="Vue.delete">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>


  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>
  <div id="app">

    <input type="text" v-model.lazy="num" />
    <p>out: {{ num }}</p>

  </div>
</body>
0 голосов
/ 03 ноября 2018

@change не сработает, пока вы не измените фокус на что-то другое. Чтобы убедиться, что вы оцениваете ввод при вводе, используйте @input. Он будет срабатывать при каждом нажатии клавиши.

Также следите за последним значением, чтобы можно было сбросить: 

<v-text-field type="text" :value="num" @input="changeNum($event)" />
<p>{{ num }}</p>

...

export default {
  data: () => ({
    num: 0,
    lastNum: 0
  }),
  methods: {
    changeNum(e) {
      let v = parseFloat(e);
      if (!isNaN(v)) {
        this.num = parseFloat(v.toFixed(3));
        this.lastNum = this.num;
      }
      else {
        this.num = this.lastNum;
      }
    }
  }
};
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...