[Vuejs]-Applying a filter to a v-model.number input

1👍

Filters are only intended for applying formatting to values when rendering template – specifically with text interpolation ({{ }}) and v-bind

You can’t use filters with 2-way data binding (like v-model) because they are missing the "piece" which takes the formatted value from input and removes the formatting before storing resulting value back into the component’s data model.

But v-model is just syntax sugar for updating data on user input events so you can do:

<input
  v-bind:value="row['myValue'] | toCurrency"
  v-on:input="myFunctionWhichRemovesFormattingAndStoreValue($event.target.value, row)"
>

IMHO its much easier to just use component like vue-cleave-component or vue-numeric for that….

Leave a comment