b-form-input 格式化程序不格式化数字

Question

我正在尝试让输入的数字在用户键入时以逗号分隔显示。我正在使用 bootstrap-vue 的 b-form-input。我相信格式化程序是正确的选择。当我使用格式化程序时，我没有看到预期的格式化结果。这是我的 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

您需要拆分字符串并用逗号连接它们。

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

但上面的例子总是在每个字符串后添加逗号，并且不接受字符串中的逗号

Answer 2

这是因为发送到您的格式化程序函数的值始终是一个字符串，但现在您正在检查一个数字。

因此您需要改为执行此操作以使您的格式化程序使用您当前的代码。

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

您也不应使用 v-model.number，但如果您希望 v-model 值作为数字输出，则应使用 number 属性。（格式化程序仍然是一个字符串）

v-model modifiers .number and .trim can cause unexpected cursor jumps when the user is typing (this is a Vue issue with v-model on custom components). Avoid using these modifiers. Use the number or trim props instead.

https://bootstrap-vue.org/docs/components/form-input#input-type（在 输入类型注意事项下）

Answer 3

根据我从 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>

b-form-input 格式化程序不格式化数字

b-form-input formatter not formatting number

vue.js

bootstrap-vue