I need help finding a vue3 directive for formatting German decimal values. The issue I'm experiencing is that I want to display the decimal value in German format, but store it with a "." as the decimal separator.
My current test implementation is not working as expected. The on blur event seems to be replacing the entire model instead of updating just the decimal value.
Custom Directive
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 = '';
}
});
},
};
Usage Example
<input v-model="myObj.multiplicator" v-decimal required />
Any suggestions on how to fix this issue?