Format input currency value

Add $ and comma separators for currency display

by nikolya223

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<body>
    <div id="app">
        <my-currency-input></my-currency-input>
    </div>
</body>

CSS

body {
    margin: 20px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

JavaScript

Vue.component('my-currency-input', {
    template: `
        <div>
            <input type="text" v-model="obj" @input="input('obj')" >
        </div>`,
    data: function() {
        return {
            obj: "", 
        }
    },
    methods: {
        input: function(key) {
            this[key] =  this[key].replace(/[^0-9]+/g, "")
        }, 
    }
});

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