robmcalister/fiddle.css

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

## fiddle.html
<body>
    <div id="app">
        Price:
        <my-currency-input v-model="price"></my-currency-input>
        <p>
            Price (in parent component): {{price}}
        </p>
    </div>
</body>

## fiddle.js
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() {
                if (this.isInputActive) {
                    // Cursor is inside the input field. unformat display value for user
                    return this.value.toString()
                } else {
                    // User is not modifying now. Format display value for user interface
                    return "$ " + this.value.toFixed(2).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
        }
    }
});
	body {
	margin: 20px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	}
	input {
	border: 1px solid #888;
	font-size: 1.2rem;
	padding: 0.5rem;
	}
	<body>
	<div id="app">
	Price:
	<my-currency-input v-model="price"></my-currency-input>
	<p>
	Price (in parent component): {{price}}
	</p>
	</div>
	</body>
	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() {
	if (this.isInputActive) {
	// Cursor is inside the input field. unformat display value for user
	return this.value.toString()
	} else {
	// User is not modifying now. Format display value for user interface
	return "$ " + this.value.toFixed(2).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
	}
	}
	});