Vue number input

by Abhilash1994

HTML

<div id="app">
<div>
<input placeholder="Name a price" v-model="price" @keypress="onlyForCurrency">


</div>
</div>

CSS

body {
  padding: 2rem;
}

Vue

new Vue({
  el: "#app",
  data () {
    return {
      price: null,
      previousPrice: null
    }
  },
  methods: {
    onlyForCurrency ($event) {
     // console.log($event.keyCode); //keyCodes value
     let keyCode = ($event.keyCode ? $event.keyCode : $event.which);

     // only allow number and one dot
     if ((keyCode < 48 || keyCode > 57) && (keyCode !== 46 || this.price.indexOf('.') != -1)) { // 46 is dot
      $event.preventDefault();
     }

     // restrict to 2 decimal places
     if(this.price!=null && this.price.indexOf(".")>-1 && (this.price.split('.')[1].length > 1)){
     $event.preventDefault();
     }
   }
  }
})