Formatted currency input component using Vue.js

by javad ebrahimi

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<body>
    <div id="app">
        Price:
        <my-currency-input v-model="price"></my-currency-input>
        <p>
            Price (in parent component): {{price}}
        </p>
    </div>
</body>

CSS

body {
    margin: 20px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
input {
    border: 1px solid #888;
    font-size: 1.2rem;
    padding: 0.5rem;
}

JavaScript

Vue.component('my-currency-input', {
    props: ["value"],
    template: `
        <div>
            <input type="text" v-model="displayValue" @blur="isInputActive = false" @focus="isInputActive = true"/>
        </div>`,
    data: function() {
        return {
            isInputActive: false
        }
    },
    computed: {
        displayValue: {
            get: function() {

                    // User is not modifying now. Format display value for user interface
                    return this.value.toString().replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, "$1,")
                
            },
            set: function(modifiedValue) {
                // Recalculate value after ignoring "$" and "," in user input
                let newValue = parseFloat(modifiedValue.replace(/[^\d\.]/g, ""))
                // Ensure that it is not NaN
                if (isNaN(newValue)) {
                    newValue = 0
                }
                // Note: we cannot set this.value as it is a "prop". It needs to be passed to parent component
                // $emit the event so that parent component gets it
                this.$emit('input', newValue)
            }
        }
    }
});

new Vue({
    el: '#app',
    data: function() {
        return {
            price: 1234
        }
    }
});