Currently, I have two inputs and an array with two number positions. The v-model in each input corresponds to a value in the array. Whenever a change is made in either input field, it reflects on the corresponding position in the array, which works perfectly.
My goal is to format the numbers in each input by adding thousands and millions commas while still keeping the original unformatted number in the array as a type of number. Despite having a function that formats the number correctly in the console, I am struggling to display this formatted value in the input fields. How can I accomplish this task?
<template>
<input
type="text"
class="text-center"
v-model="rangePrice[0]"
/>
<input
type="text"
class="text-center"
v-model="rangePrice[1]"
/>
</template>
<script setup>
const rangePrice = ref([0, 100000000])
// This function successfully formats the value in the console
const format = (e) => {
console.log(rangePrice.value[0].toString().replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ","))
}
</script>
In my implementation, I am utilizing a Vue form slider where there are two draggable points representing the minimum and maximum values from the array. As the slider is dragged, the numeric values are updated accordingly:
<Slider
class="slider"
v-model="rangePrice"
:lazy="false"
:min="0"
:max="100000000"
:tooltips="false"
/>