Javascript 具有区域设置格式的十进制/浮点输入字段

我想解决以下问题：

我得到了一个

字段，该字段专为用户输入小数而设计，如

12.5

，以特定于语言环境的格式输入

在我的例子中：德国地区

在德国，我们使用逗号作为十进制分隔符

因此，输入值

12,5

应计算为模型值

12.5

这是我的方法：

<template>
        <input
            :id="'form-'+name"
            v-model="displayValue">
</template>
<script>

export default {
    name: 'DecimalField',
    props: {
        value: [String, Number],
    },
    data: () => ({
        innerValue: '',
    }),
    watch: {
        innerValue (newVal) {
            this.$emit ('input', newVal);
        },
        value (newVal) {
            this.innerValue = newVal;
        }
    },
    computed: {
        displayValue: {
            get: function () {
              return Intl.NumberFormat("de-DE",
                    { style: "decimal" }).format(this.innerValue);
            },
            set: function (modifiedValue) {
                this.innerValue = Intl.NumberFormat("en-GB",
                    { style: "decimal" }).format(modifiedValue);
            }
        }
    },
}
</script>

导出默认值{
名称：“德米尔菲尔德”，
道具：{
值：[字符串，数字]，
},
数据：（）=>({
内部值：“”，
}),
观察：{
内部值（newVal）{
此.$emit（'input'，newVal）；
},
值（newVal）{
this.innerValue=newVal；
}
},
计算：{
显示值：{
get:function（）{
返回Intl.NumberFormat（“de de”，
{style:“decimal”}.format（this.innerValue）；
},
设置：函数（修改值）{
this.innerValue=Intl.NumberFormat（“en GB”，
{style:“decimal”}）.format（modifiedValue）；
}
}
},
}

（您可能想在codepen:）上修补一下

**问题是：**

如果输入12.5，输入中显示的值将显示为12,5（在德国是正确的）。但是如果你试着输入12,5，你会得到NaN

---

我的问题：我该如何解决这个问题？

我想如果你按照这个答案建模你的函数：它会工作得很好。我想如果你按照这个答案建模你的函数：它会工作得很好。