[code]
<template>
<div>
<input
v-model=”displayValue”
type=”text”
@blur=”isInputActive = false”
@focus=”isInputActive = true”
/>
</div>
</template>
<script>
export default {
props: [‘value’],
data: function() {
return {
isInputActive: false,
}
},
computed: {
displayValue: {
get: function() {
if (this.isInputActive) {
return this.value.toString()
} else {
return (
‘$ ‘ +
this.value.toFixed(0).replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, ‘$1,’)
)
}
},
set: function(modifiedValue) {
let newValue = parseFloat(modifiedValue.replace(/[^\d\.]/g, ”))
if (isNaN(newValue)) {
newValue = 0
}
this.$emit(‘input’, newValue)
},
},
},
}
</script>
<style lang=”scss” scoped>
.currency-input {
.input-value {
width: 100px;
}
}
</style>
[/code]