Vue.js - Restore input value if model rejects changes

Question

I have a text input that allow user to type a number with maximum of 3 digits after decimal point:

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

If I type '123.456', then num = 123.456. If I append text '789', then input will contain 123.456789 but num = 123.456. So, user may think that the changes have been applied, but it is not...

How can I force the input to update, if changeNum fails?

score 4 · Accepted Answer · answered Nov 03 '18 at 22:23

You could achieve your use case by using only v-model.lazy to change data after leaving the textfield, and watch property which save the old and new value that allows us to control the typed value after focusing somewhere else.

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>

Jim B. · Answer 2 · 2018-11-03T21:19:29.397

2

@change won't fire until you change focus to something else. To ensure you evaluate the input as you type, use @input instead. It will fire with every keystroke.

Also, keep track of the last value so you can reset:

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

edited Nov 03 '18 at 21:19

answered Nov 03 '18 at 20:21

Jim B.

4,512
3
25
53

You don't understand, the problem is not in the type of event. `changeNum` shouldn't update the model, if the input has an invalid value. I want to reset the input value to the last valid model value, when the current input value is invalid. For example, let the current input value is `'1.234'`. Then I type `'1.234safsaf'` and click outside to fire `@change`. I want the displayed input value to be reset to `'1.234'`, because `'1.234safsaf'` is invalid. – Groxan Nov 03 '18 at 21:15
So you are ok with a mismatch while typing, but want to reset once the input loses focus. That wasn't clear. – Jim B. Nov 03 '18 at 21:20

score 2 · Answer 3 · answered Nov 03 '18 at 21:31

2

I think that $forceUpdate should solve your issue ..

methods: {
    changeNum(e) {
      let v = parseFloat(e);
      if (!isNaN(v)) {
        this.num = parseFloat(v.toFixed(3));
        this.$forceUpdate();
      }
    }
}

answered Nov 03 '18 at 21:31

Husam Ibrahim

6,999
3
16
28

Your answer is good, but it does not work for me because I use `v-text-field` component from Vuetify.js, and `$forseUpdate` does not affect all child components, only the instance itself and child components with inserted slot content. – Groxan Nov 04 '18 at 11:34

Vue.js - Restore input value if model rejects changes

3 Answers3