Vue.js显示价格作为价格，但保持为int

Question

我有一个名为“formatted-number”的vue组件，它接收一个int值（1234）并将其当前更改为字符串（“12.34”），以便显示为价格（带“，”或“。”“取决于国家/地区）在文本字段中。

我想将值保留为int并将其显示为价格，以便我们的用户可以编辑“字符串价格”，但它也会在后台更新int值。

有人知道如何管理这个吗？

以下是当前代码：

Vue.component('formattedNumber', {
    props: ['value', 'abs'],
    template: '<input type="text" :value="value" autocomplete="off" @blur="updateNumber($event.target.value)" ref="input">',
    mounted: function () {
        this.updateNumber(this.value / 100);
    },
    methods: {
        separators: function () {
            var comparer = new Intl.NumberFormat(navigator.language).format(10000 / 3);

            return {
                thousandSeparator: comparer[1],
                decimalSeparator: comparer[5]
            };
        },
        unformat: function (number) {
            var separators = this.separators();

            var result = number
                .toLocaleString(navigator.language)
                .replace(separators.thousandSeparator, '')
                .replace(/[^\d.,-]/g, '')
                .replace(separators.decimalSeparator, '.');

            return this.abs ? Math.abs(Number(result)) : this.Number(result);
        },
        updateNumber: function (value) {
            this.$emit('input', new Intl.NumberFormat(
                navigator.language,
                {minimumFractionDigits: 2, maximumFractionDigits: 2}).format(this.unformat(value)
            ));
        }
    }
});

Answer 1

创建过滤器：docs。

过滤器仅更改html输出并保持值不变。