Reputation: 866
I'm searching for an implementation of a vue3 directive for german decimal values. The challange that I'm facing is that I need to display the german decimal but store the correct decimal with "."
Following my test that is not working. The on blur event overwrites the complete model instead of setting the single decimal value
export default {
beforeMount(el, binding) {
el.pattern = '^d+(,d{1,2})?$';
el.addEventListener('blur', (event) => {
let value = event.target.value.replace(',', '.');
const numericValue = parseFloat(value);
if (!isNaN(numericValue)) {
binding.instance.$emit('update:modelValue', numericValue);
el.value = numericValue.toLocaleString('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
} else {
el.value = '';
}
});
},
};
<input v-model="myObj.multiplicator" v-decimal required />
How can I solve this?
Upvotes: 0
Views: 39
Reputation: 46794
I would personally try to skip a manual implementation and use the Browser Standard Intl.NumberFormat API, this would look something like
new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number)
you could wrap this into a method and pass your currency to it so that it's formatted properly on your UI.
Here's a YT video that explains it a bit more visually, if needed.
Upvotes: 1