admin管理员组

文章数量:1402156

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?

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?

  • javascript
  • vue.js
  • vuejs2
  • vue-ponent
  • vuetify.js
Share Improve this question edited Sep 10, 2019 at 10:56 Boussadjra Brahim 1 asked Nov 3, 2018 at 19:12 GroxanGroxan 7788 silver badges20 bronze badges 0
Add a ment  | 

3 Answers 3

Reset to default 4

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/npm/vue/dist/vue.js"></script>

</head>

<body>
  <div id="app">

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

  </div>
</body>

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

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

本文标签： javascriptVuejsRestore input value if model rejects changesStack Overflow

版权声明：本文标题：javascript - Vue.js - Restore input value if model rejects changes - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744344749a2601689.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。