CODEWITHSUNDEEP
javascriptvue.jsvuejs3vue-directives
SNO
SNO

Reputation: 866

Directive for German decimal inputs

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

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

 <input v-model="myObj.multiplicator" v-decimal required />

How can I solve this?

Upvotes: 0

Views: 39

Answers (1)

kissu
kissu

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

Related Questions