Как сделать правильное realtime округление js+vue

У меня есть <input> у которого v-model привязан к Price когда я ввожу значения мне надо что бы он округлял все числа кратно 1000 для калькулятора цен в реальном времени например

  • 15699 = 16000
  • 11111= 11000

сделал watch для отслеживания Price

но в методе Priceround() не дает ввести значение больше чем кратное 1000

например при попытке 15000 = он сразу делает 2000 т.к 1500 сразу округляются до 2000

попытался сделать тайм аут 3 секунды что бы юзер мог ввести значения до округления но setTimeout в Priceround() вызывает бесконечный спам

Как правильно реализовать real time округление или просто округление без подтверждения или нажатия кнопки submit

                ``` <template>
                  <input
                    v-model.number="Price"
                    type="number"
                    min="1000"
                    max="30000"
                    step="1000"
                    class="form-control min-vw-25% vw-25%"
                    required
                    minlength="4"
                  />
                 </template>```
name: "calc3",

  data: () => ({
    Price: 1000, // базовое значение цены
    day: 1, // базовое значение дня
    Percent: 0, // итоговое значение процента
    PercentDay: 1, // процент в день
    year: 365,
    // TODO: сделать проверку на високосный год
    a: 100, // ячейка для деления на 100
    allsum: 0,
    // date: new Date().toLocaleDateString(),
    // ползунок денег
    stepPrice: 1,
    value: 0,
    maxPrice: 30000,
    minPrice: 1000,
    showTooltipPrice: "always",
    // ползунок денег
    //  ползунок дня
    maxday: 30,
    minday: 1,
    stepday: 0,
    showTooltipday: "always", //always|focus|drag.
    },
  }),
  props: {},
  methods: {

    Priceround() {
      if (this.Price > 1000) {
        console.log(`${this.Price} >`)
        this.Price = Math.round(this.Price / 1000) * 1000
        return this.Price
      }
      else if (this.Price < 1000) {
        console.log(` < ${this.Price} `)

        setTimeout(() => {
          // alert("<1000")
          this.Price = Math.round(this.Price * 1000) / 1000
        }, 3000)

        // this.Price = Math.round(this.Price / 1000) * 1000
        return this.Price
      }
    },

  },
  computed: {},


  watch: {

    Price() {
      // {
      //   if (this.price < 1000) setTimeout(this.Priceround(), 3000)
      //   else if (this.price > 1000) {
      //     this.Priceround()
      //   }
      // }
      // if (this.Price > 1000) {
      //   this.Priceround()
      // }
      this.Priceround()

      if (this.Price == undefined) {
        // проверка на пустую строку
        return (this.Price = null)
      }
      // if (this.Price == isNaN) {
      //   // проверка на пустую строку
      //   return (this.Price = 1000)
      // }
      if (this.Price == 0) {
        return (this.Price = null)
      }
      if (this.Price > 30000) {
        return (this.Price = 30000)
        // return this.getPrice()
      }
      if (this.Price == 30000) {
        return (this.Price = 30000)
      }
    },
    
</script>

Ответы (0 шт):