format numbers from an array into an input

Question

I have two inputs and an array with two positions in which both are numbers, in each input its v-model will make a value of the array in each position, writing in each input changes the heat in the array and this is fine.

I am trying to write in each input to format it and add commas of thousands and millions but keeping the value in the array without format and of type number, I have a function that formats it well in the console, but I cannot show it in the input, how can I achieve this?

<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 displays the formatted value to the console
const format = (e) => {
  console.log(rangePrice.value[0].toString().replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ","))
}
</script>

I am using vue form slider where I have two scroll points and these two minimum and maximum values are the values of the array, which when moving the bar converts the values to a number:

<Slider
 class="slider"
 v-model="rangePrice"
 :lazy="false"
 :min="0"
 :max="100000000"
 :tooltips="false"
/>

Nikola Pavicevic · Accepted Answer · 2022-11-14 01:09:24Z

2

Try with @input and :value instead v-model:

const { ref } = Vue
const app = Vue.createApp({
  setup() {
    const rangePrice = ref([0, 100000000])
    const format = (e) => {
      return e.toString().replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, ",")
    }
    const saveInput = (e, i) => {
      rangePrice.value[i] = parseInt(e.target.value.replaceAll(',', ''))
    }
    return {
      rangePrice, format, saveInput
    };
  },
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <input 
    type="text" 
    class="text-center" 
    :value="format(rangePrice[0])"
    @input="saveInput($event, 0)"
  > 
  <input 
    type="text" 
    class="text-center" 
    :value="format(rangePrice[1])"
    @input="saveInput($event, 1)"
  > 
  {{rangePrice}}
</div>

edited Nov 14, 2022 at 1:09

answered Nov 14, 2022 at 1:04

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jose Over a year ago

works fine on input, but when inspecting the component and seeing the value in the array, it still formats it by adding the commas =/

Jose Over a year ago

I edited the question, I think it had a part that goes along with it that I didn't add

Nikola Pavicevic Over a year ago

@luis hey mate, check again, you can see array with values without commas ( I forgot to clear input, you can use parseInt or Number) :)

Jose Over a year ago

this way, right? numbersrangePrice.value[i] = Number(e.target.value) , so it only lets me write 4

Collectives™ on Stack Overflow

format numbers from an array into an input

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related