b-form-input formatter не форматирует число

Question

Я пытаюсь отображать входные числа с разделением запятыми по мере ввода пользователя. Я использую b-form-input bootstrap - vue. Я считаю, что форматтер - правильный вариант для этого. Когда я использую средство форматирования, я не вижу отформатированных результатов, как ожидал. Вот мой jsfiddle https://jsfiddle.net/spike_wood/34wqme5n/9/

** В качестве пояснения цель состоит в том, чтобы сохранить переменные точки в виде числа, чтобы выполнять математику и так далее. Цель состоит в том, чтобы отобразить число в поле ввода в удобочитаемом виде, когда оно очень большое.

<div id="app">
  <div>
    <b-form>
      <b-form-group
        label-for="totalPoints"
        description="Enter points."
      >
        <label for="totalPoints">Total Points</label>
        <b-input-group append="pts">
          <b-form-input
            style="width: 20%"
            id="totalPoints"
            v-model.number="points"
            placeholder="Enter your total points"
            :formatter="numberFormat"
          />
        </b-input-group>
      </b-form-group>
    </b-form>
    <h3>Unformatted Points: {{ points }}</h3>
    <h3>Formatted Points: {{ numberFormat(points) }}</h3>
  </div>
</div>

И мой javascript:

  new Vue({
    el: '#app',
    data() {
      return {
        name: 'BootstrapVue',
        points: ''
      }
    },
    methods: {
        numberFormat(value) {
        return value === 0 ? '' : value.toLocaleString();
      }
    }
  })

Сообщите мне, если Я подхожу к этому неправильно.

Answer 1

Это потому, что значение, отправляемое вашей функции форматирования, всегда будет строкой, но сейчас вы проверяете число.

Поэтому вам нужно сделать это вместо этого, чтобы ваш форматировщик работал с вашим текущим код.

numberFormat(value) {
  return value === '0' ? '' : value.toLocaleString();
}

Вам также следует использовать не v-model.number, а опору number, если вы хотите, чтобы значение v-модели выводилось как число. (форматирование по-прежнему будет строкой)

Модификаторы v-модели .number и .trim могут вызывать неожиданные скачки курсора, когда пользователь вводит текст (это проблема Vue с v-моделью на пользовательском составные части). Избегайте использования этих модификаторов. Вместо этого используйте числовые или обрезные реквизиты.

https://bootstrap-vue.org/docs/components/form-input#input -тип (под Предостережения в отношении типов ввода )

Answer 2

Взяв то, что я узнал из ответа Hiws, я создал строку отображения для поля и переменную для захвата фактического числа. Это позволяет мне выполнять математические вычисления с числом в удобочитаемом формате.

Мой сценарий теперь выглядит следующим образом. Я также перешел к оператору приведения типов в моем операторе return, чтобы удалить только 0 строк из поля ввода

new Vue({
    el: '#app',
    data() {
      return {
        points: 0,
        displayPoints: ''
      }
    },
    methods: {
      numberFormat(value) {
        this.points = Number(value.replace(/\D/g, ''))
        return value == '0' ? '' : this.points.toLocaleString();
      }
    }
  })

А мой html выглядит следующим образом. Я удалил все приведение чисел из ввода, так как это не очень хорошо сочетается с запятыми, которые я вставлял.

<div id="app">
  <div>
    <b-form>
      <b-form-group
        label-for="totalPoints"
        description="Enter points."
      >
        <label for="totalPoints">Total Points</label>
        <b-input-group append="pts">
          <b-form-input
            style="width: 20%"
            id="totalPoints"
            v-model="displayPoints"
            placeholder="Enter your total points"
            :formatter="numberFormat"
          />
        </b-input-group>
      </b-form-group>
    </b-form>
    <h3>Unformatted Points: {{ points }}</h3>
    <h3>Formatted Points: {{ displayPoints }}</h3>
    <h3>Math on Points: {{ points + points }}</h3>
  </div>
</div>

Answer 3

Вам нужно разделить строку и соединить их запятой.

methods: {
    numberFormat(value) {
        return value.replace(/,/g, '').split('').join(',')
  }
}

Но в приведенном выше случае всегда будет добавляться запятая после каждой строки и не будет запятой в строке