При вводе на vue.js в input чисел нужно чтобы они разбивались на разряды и разделялись пробелами тысячные. Как это реализовать на VUE.js?

Question

Во vue.js есть input куда должны вводиться только числовые значения и при тысячи, значение должно разбиваться пробелом, как это можно реализовать на Vue.js что бы сразу после потери фокуса число билось на тысячные разделенное пробелом? Пример input из проекта

    <input
                        @keypress="
                          isNumber(
                            $event,
                            tb.UF_IS_MINUS,
                            indicators.indicators.AMORTIZATION[tb.ID][
                              year.UF_YEAR
                            ].UF_KV3
                          )
                        "
                        @change="
                          numberFix(
                            indicators.indicators.AMORTIZATION[tb.ID][
                              year.UF_YEAR
                            ],
                            'UF_KV3'
                          )
                        "
                        :disabled="editDisabled || year.KV3_IS_EDIT === 0"
                        type="text"
                        class="i-main-style"
                        v-model="
                          indicators.indicators.AMORTIZATION[tb.ID][
                            year.UF_YEAR
                          ].UF_KV3
                        "
                      />

Answer 1

Как вариант, можете воспользоваться методом - Number.prototype.toLocaleString() - который возвращает строку с языко-зависимым представлением числа.

Привожу небольшой пример компонента, который получает число в качестве v-model и преобразовывает это число в нужный вам формат с возможностью редактирования этого числа.

Принцип работы компонента: Определяем переменные необходимые для работы input:

data: () => {
   return {
    realNumber: 0, // будет содержать актуальное числовое значение
    indicatorChange: false, // индикатор редактирования поля
 }
},

Создаем вычисляемое свойство для v-model конкретного input:

computed: {
 modelNumber: {
  get() {
    return this.indicatorChange ? this.realNumber : this.realNumber.toLocaleString()
  },
  set(value) {
    this.realNumber = +value.replace(/\s/g, "")
    this.$emit('input', this.realNumber)
  },
},
},

, как видно из кода, мы опираемся на значение get вычисляемого свойства и получаем активное реальное значение числа(для редактирования) или отформатированного числа для отображения(для случая потери фокуса полем формы)

После этого, оформляем template компонента опираясь на созданные переменные:

<input
    :id="title"
    v-model="modelNumber"
    :type="indicatorChange ? 'number' : 'text'"
    @focus="indicatorChange = true"
    @blur="indicatorChange = false"
  />

, где type можно сделать динамическим и зависимым от статуса редактирования поля, чтобы подключить нативные возможности валидации браузера (ввод только чисел)

Каким-то образом это все похоже на танцы с бубном) но думаю - почерпнете для себя немного информации

Vue.component('numinput', {
  props: ['title', 'value'],
  data: () => {
    return {
      realNumber: 0,
      indicatorChange: false,
    }
  },
  computed: {
    modelNumber: {
      get() {
        return this.indicatorChange ? this.realNumber : this.realNumber.toLocaleString()
      },
      set(value) {
        this.realNumber = +value.replace(/\s/g, "")
        this.$emit('input', this.realNumber)
      },
    },
  },
  created() {
    this.realNumber = this.value || 1234567
  },
  template: `
    <div>
      <label :for="title">{{title}}</label>
      <input
        :id="title"
        v-model="modelNumber"
        :type="indicatorChange ? 'number' : 'text'"
        @focus="indicatorChange = true"
        @blur="indicatorChange = false"
      />
     </div>
  `
})


new Vue({
  el: '#app',
  data: () => {
    return {
      num1: 1000,
      num2: 150000,
      num3: 20000.444
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <form>
    <numinput title="num1" v-model.number="num1"></numinput>
    <numinput title="num2" v-model.number="num2"></numinput>
    <numinput title="num3" v-model.number="num3"></numinput>
  </form>
  <hr>
  <pre>
   Актуальные значения:
    num1 = {{ num1 }}
    num2 = {{ num2 }}
    num3 = {{ num3 }}
  </pre>
</div>

БЛОГ НА HUSL

При вводе на vue.js в input чисел нужно чтобы они разбивались на разряды и разделялись пробелами тысячные. Как это реализовать на VUE.js?

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