Filter input text only accept number and dot vue.js

Question

I have a text box and only want to accept numbers and a period "." when using VueJS. Can anyone help with code? I'm new to Vue.

Answer 1

You can write a Vue method and that method can be called on the keypress event. Check out this fiddle.

Update:

adding source code:

HTML

<div id="demo">
  <input v-model="message" @keypress="isNumber($event)">
</div>

Vue.js

var data = {
  message: 1234.34
}

var demo = new Vue({
  el: '#demo',
  data: data,
  methods: {
    isNumber: function(evt) {
      evt = (evt) ? evt : window.event;
      var charCode = (evt.which) ? evt.which : evt.keyCode;
      if ((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 46) {
        evt.preventDefault();;
      } else {
        return true;
      }
    }
  }
});

Answer 2

You should change your input to type="number" to more accurately reflect your behaviour. You can then use the built-in Vue.js directive v-model.number.

Usage:

<input type="number" v-model.number="data.myNumberData"/>

Answer 3

This was my solution. Most of the answers here have been deprecated. Additionally, input values always return a string, even if you key a number. So because of that, some of the solutions here did not work for me.

In my case I didn't want a decimal point, but I added that into the array for the purpose of this thread.

<b-form-input v-model.number="quantity" @keypress="isNumber($event)" type="number"></b-form-input>

isNumber (evt: KeyboardEvent): void {
    const keysAllowed: string[] = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '.'];
    const keyPressed: string = evt.key;
    
    if (!keysAllowed.includes(keyPressed)) {
           evt.preventDefault()
    }
}