Input-mask.vue

<template>
  <input type="text" :value="maskedValue" :ref="'inputRef'" @input="handleInput($event)">
</template>

<script>
export default {
  name: "Input",
  model: {
    prop: "hiddenValue",
    event: "blur"
  },
  props: {
    hiddenValue: {
      type: [String, Number]
    }
  },
  computed: {
    maskedValue() {
      const vm = this
      
      if (!vm.hiddenValue) {
        return 0
      }
      // Convert number value to string
      let maskedVal = String(vm.hiddenValue)
      
      // Split the amount in array if value in decimal
      // First part contains value befire decimal point
      // Second part contains value after decimal point
      let parts = maskedVal.split(".")
      
      // Apply regex for mask the fisrt part
      // It will transform the first part into the comma seperated value
      parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",")
      return parts.join(".")
    }
  },
  methods: {
    handleInput(event) {
      const vm = this
      let unMaskedVal = null
      
      // Split the amount in array if value in decimal
      let parts = event.target.value.split(".")
      
      // Now unmask the value by applying reverse logic
      parts[0] = parts[0].split(',').join("")
      
      unMaskedVal = parseFloat(parts.join("."))

      // Emit the blur event so it automatically sets the hiddenValue
      vm.$emit("blur", unMaskedVal)
    }
  }
};
</script>

<style scoped>
</style>