b-form-input格式化程序没有格式化数字

Question

我正在尝试让输入数字在用户键入时以逗号分隔显示。我正在使用bootstrap vue的b-form-input。我相信格式化程序是正确的选择。当我使用格式化程序时，我没有看到我预期的格式化结果。这是我的小提琴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模型值输出为数字，则也不应使用v-model.number，而应使用number道具。(格式化程序仍然是字符串(

v-model修饰符.number和.trim在用户键入时可能会导致意外的光标跳跃(这是自定义组件上v-model的Vue问题(。避免使用这些修饰符。请使用数字或修剪道具。

https://bootstrap-vue.org/docs/components/form-input#input-类型(在带有输入类型的警告下(

Answer 3

根据我从Hiws answer中学到的知识，我为该字段创建了一个显示字符串，并创建了用于捕获实际数字的变量。这使我能够在具有可读格式的情况下对数字进行数学运算。

我的脚本现在看起来如下。我还在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>