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>

I have added vee-validate.js lib for validation for my whole form. So how can I use v-validate in this example?
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>

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). — Adriano, May 06 '19 at 22:32
Thanks for the suggestion on formatting part. I am looking for info on how to use v-validate in given scenario. — Shikha Rani, May 07 '19 at 04:54

score 14 · Accepted Answer · edited Jul 07 '21 at 08:10

14

I think you can use {{ parseFloat.($variable).toFixed(2) }}, is simple for decimal numbers for vue.js . you can try this.

edited Jul 07 '21 at 08:10

Roland Schneider

3,615
3
32
43

answered Oct 28 '20 at 10:54

Taufik Hasan A

176
1
3

1

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). – ekampp Oct 28 '20 at 14:14

score 4 · Answer 2 · answered Jan 26 '22 at 14:32

4

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

in template

{{ formatNumber($variable) }}

answered Jan 26 '22 at 14:32

Adrian

91
3

score 1 · Answer 3 · edited Jul 16 '22 at 02:32

1

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'
});

edited Jul 16 '22 at 02:32

tony19

125,647
18
229
307

answered May 06 '19 at 16:31

Jon Awoyele

336
1
2
10

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. – Shikha Rani May 07 '19 at 04:52

Decimal Formatting in Vue Framework

3 Answers3