PriceInput.vue

PriceInput.vue

<template>
  <input type="text"
         inputmode="numeric"
         :value="editing ? value : formattedValue"
         @focus="editing = true"
         @blur="editing = false"
         @input="value = $event.target.value"
         placeholder="Enter"
         pattern="[0-9]*"/>
</template>

<script setup>
import { computed, ref } from 'vue'

const editing = ref(false)
const value = ref('')

const formattedValue = computed(() => {
  return value.value && Number(value.value).toLocaleString()
})
</script>