Si te encuentras con algún detalle que no entiendes puedes dejarlo en la sección de comentarios y haremos todo lo necesario de ayudarte tan rápido como podamos.
Solución:
Ejemplo de trabajo: https://jsfiddle.net/0s14cbqx/
En plantilla:
En js:
data()
return
price:null
,
methods:
onlyForCurrency ($event) keyCode > 57) && (keyCode !== 46
De esta forma, los usuarios sólo pueden key en números y un punto y no puedo key en cualquier cosa después de 2 decimales.
Para la entrada con número de tipo, esto es lo que decidimos:
data ()
return
price: null,
previousPrice: null
,
methods:
handleInput (e)
let stringValue = e.target.value.toString()
let regex = /^d*(.d1,2)?$/
if(!stringValue.match(regex) && this.price!== '')
this.price = this.previousPrice
this.previousPrice = this.price
La idea es verificar el resultado de entrada del usuario. Si no coincide con el patrón de expresión regular requerido, restablecemos los datos a su estado anterior usando previousPrice. Demostración: https://jsfiddle.net/edwardcahyadi/qj9mw5gk/2/
Utilizando el autoNumeric La biblioteca Javascript funciona muy bien.
Hay un componente Vue.js que lo envuelve: vue-autoNumeric.
Además, funciona bien con Vuetify‘s v-text-fieldconsulte https://codesandbox.io/s/yw07v978mj.