How can I efficiently convert monetary values from dollars to cents in VueJS? For example, converting $5 or $5.12 to 500 and 512 respectively.
new Vue({
el: "#app",
data: {
price: 5.1
},
computed: {
amount() {
return (this.price * 100);
}
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<label>Total amount (formatted)<br>
<input v-model="price"></label>
</label>
<p>
<label>Total amount (cents) {{ amount }}<br>
<input v-model.number="amount" name="amount" required type="number"></label>
</div>
I have observed that the presence of decimals such as "5.10" might cause conversion errors.
To ensure accuracy, I want to prevent users from entering values like 5.1 and 5.12345 as they are not true representations of money. Cents should always be in double digits, correct?
If you have any suggestions on how to avoid mistakes in this process, please share them with me!