Decimal Formatting in Vue Framework

Question

I am new to Vue Framework. My requirement is to add money currency formatting in an input box.

Formatting:
I need to add a decimal with two zeros on focus out and remove zero at focus in. The v-modal value should not change as this format is just for the user display.

I found this solution which is quite close to my requirement: https://jsfiddle.net/mani04/w6oo9b6j. There are just two additional things I am not able to implement.

I want to use it like:

<my-currency-input id="test1" name="test2" v-model="price" v-validate="required|numeric” ></my-currency-input>

1. I have added vee-validate.js lib for validation for my whole form. So how can I use v-validate in this example?
2. I don't want to round off my string. We just need to add and remove (.00) Here, if user enters 35.7896 it is making it 35.79. For my requirement, it should remain 35.7896 as it is already having decimal. It should only add decimal when user enter a number.

How can I do this? Should I use Vue directive for this?

https://jsfiddle.net/mani04/w6oo9b6j/

Something like this I want

<my-currency-input id="test1" name="test2" v-model="price" v-validate="required|numeric” ></my-currency-input>

Lambdacism

The easiest thing you could do is to create a hidden input field with the "clean" value and the displayed input field formatted as fancy as you want. So you have control on the data passed to the app (with the hidden field), and you have total control on the data shown to the user (with the displayed field). – Panegyric

Thanks for the suggestion on formatting part. I am looking for info on how to use v-validate in given scenario. – Lambdacism

Answer 1

I think you can use {{ parseFloat($variable).toFixed(2) }}

It is simple trick for decimal numbers used in vue.js

Shophar

Hi, Taufik. Thank you for your answer, and welcome to Stack Overflow. Consider using the backticks (`) to improve the readability of your answer or consider using a code block (double newline and four spaces indentation). – Huai

Answer 2

methods: {
  formatNumber (num) {
    return parseFloat(num).toFixed(2)
  },
}

in template

{{ formatNumber($variable) }} 

Marolda

Answer 3

You don't need a focus-out/focus-in method. What you need is a computed property. Try this out:

Vue.component('my-currency-input', {
    template: `
        <div>
            <input type="text" v-model="currencyValue" /> {{ formattedCurrencyValue }}
        </div>`,
    data: function() {
        return {
            currencyValue: 0,
            /* formattedCurrencyValue: "$ 0.00" */
        }
    },
    computed: {
        formattedCurrencyValue: function(){
        if(!this.currencyValue){ return "$0.00"}
            return "$" + parseFloat(this.currencyValue).toFixed(2)
        }
    }
});

new Vue({
    el: '#app'
});

Involucrum

This is printing the formatted value outside the input box.I need to show the decimal with zero within the textbox when use focus out and remove them when user focus in.So the Solution in my fiddle is correct .Only issue I have is I am not able to use v-validate now. Which I am using for all the inputs of the form. – Lambdacism

Answer 4

You can use a function for displaying a number with a desired amount of decimal digits.

The function will also check if the number is an integer (with no decimal digits) and it will display it without the decimal point.

function formatNumber(number, digits = 2) {
    if (typeof number != "number" || typeof digits != "number")
        throw "The input must be a number!";

    let integer = parseInt(number);

    if (number == integer)
        return number;
    else {
        return parseFloat(number).toFixed(digits);
    }
}

Waldrop