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>
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>
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'
});
I think you can use {{ parseFloat.($variable).toFixed(2) }}
, is simple for decimal numbers for vue.js . you can try this.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With