Solución:
Consulte este ejemplo de jsFiddle que funciona: https://jsfiddle.net/mani04/bgzhw68m/
En este ejemplo, la entrada de moneda formateada es un componente en sí mismo, que usa v-model al igual que cualquier otro elemento de formulario en Vue.js. Puede inicializar este componente de la siguiente manera:
<my-currency-input v-model="price"></my-currency-input>
my-currency-input es un componente autónomo que formatea el valor de la moneda cuando el cuadro de entrada es inactivo. Cuando el usuario coloca el cursor dentro, el formato se elimina para que el usuario pueda modificar el valor cómodamente.
Así es como funciona:
los my-currency-input el componente tiene un valor calculado – displayValue, que tiene get y set métodos definidos. En el get método, si el cuadro de entrada no está activo, devuelve el valor de moneda formateado.
Cuando el usuario escribe en el cuadro de entrada, el set método de displayValue propiedad calculada emite el valor usando $emit, notificando así al componente principal sobre este cambio.
Referencia para usar v-model en componentes personalizados: https://vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events
Aquí hay un ejemplo de trabajo: https://jsfiddle.net/mani04/w6oo9b6j/
Funciona modificando la cadena de entrada (su valor de moneda) durante los eventos de enfoque hacia afuera y hacia adentro, de la siguiente manera:
<input type="text" v-model="formattedCurrencyValue" @blur="focusOut" @focus="focusIn"/>
-
Cuando coloca el cursor dentro del cuadro de entrada, toma
this.currencyValuey lo convierte a formato plano, para que el usuario pueda modificarlo. -
Una vez que el usuario escribe el valor y hace clic en otro lugar (enfocar hacia afuera),
this.currencyValuese vuelve a calcular después de ignorar los caracteres no numéricos y el texto de la pantalla se formatea según sea necesario.
El formateador de moneda (reg exp) se puede copiar y pegar desde aquí: ¿Cómo puedo formatear números como dinero en JavaScript?
Si no desea el punto decimal como mencionó en la pregunta, puede hacerlo this.currencyValue.toFixed(0) en el focusOut método.