I am currently experimenting with cleavejs to format the thousand separator in my input numbers. I've noticed a strange behavior where if I input 1000.123, it displays as 1,000.12 which is the correct format. However, the v-model value remains as 1000.123 instead of rounding off to 1000.12. Some have suggested using v-model.lazy, but this only updates when I leave the input field.
Is there another solution to address this issue without relying on v-model.lazy?
Here is the code snippet from my current component:
<script setup lang="ts">
import { ref, watch } from 'vue'
const props = withDefaults(defineProps<Props>(), {
type: 'text',
required: false,
readonly: false,
disabled: false
})
const inputValue = ref(props.modelValue)
const emit = defineEmits<{
(e: 'update:modelValue', value: string | number): void
}>()
watch(
() => props.modelValue,
() => {
inputValue.value = numeric.format(props.modelValue)
},
{
immediate: true
}
)
watch(
inputValue,
() => {
emit('update:modelValue', parseFloat(inputValue.value.toString().replace(/(\d+),(?=\d+(\D|$))/g, '$1')))
},
{
immediate: true
}
)
</script>
<template>
<input
class="form-input"
v-model.lazy="inputValue"
v-cleave="{ numeral: true, numeralThousandsGroupStyle: 'thousand' }"
:placeholder="props.placeholder"
:required="props.required"
:readonly="props.readonly"
:disabled="props.disabled"
/>
</template>
I hope to find a way for v-model to return the same value as cleavejs provides without needing to use .lazy