v-currency how to remove symbol from model value? - vue.js

Question

I am using v-currency for vuetify
<v-text-field
v-model.trim="$v.service.manual_cost_per_slot.$model"
v-currency="{
currency: service.currency,
locale: locale,
allowNegative: false,
masked: false
}"
:label="$t('service.manual_cost_per_slot')"
class="purple-input"
/>
The value is saved into the model along with the currency symbol and thousands separator.
How can I prevent from this? what I want to achieve is to still see the symbol and separator on the form but the value in model should be a number with no symbol or separator. I am sure I am missing something obvious here...

Answer 1

Well, as the documentation of the module says:
... the v-currency
directive always emits the formatted string instead of the number
value when used with v-model. To get the number value you can use the
parseCurrency method.
There's an example there on the page. If you want the parsed value without symbols, use that numberValue computed property:
import { CurrencyDirective, parseCurrency } from 'vue-currency-input'
export default {
directives: {
currency: CurrencyDirective
},
data: () => ({
value: '$1,234.50',
locale: 'en',
currency: 'USD'
}),
computed: {
options () {
return {
locale: this.locale,
currency: this.currency
}
},
numberValue () {
return parseCurrency(this.value, this.options)
// OR using the instance method:
// return this.$parseCurrency(this.value, this.options)
}
}
}