Javascript 如何限制多个输入字段（使用v-model）仅接受Vue.js中的数字（不为每个输入字段重复代码）？

我有多个输入字段，我想在Vue.js中将它们限制为只接受数字
我想禁止用户键入除0-9数字以外的任何字符。 我已经通过这样做成功地做到了这一点（此解决方案复制粘贴校样）：

Vue.js模板中的代码：

方法删除除数字以外的所有内容：

correctNumberInput: function(event){   
          event.target.value = event.target.value.replace(/[^0-9]/g, "");
        }

这在多个领域都非常有效

问题来了：出于不同的原因，我需要在这些输入字段上使用v-model。添加v-model后，我的方法不再有效。我猜这是因为v-model在引擎盖下也使用了输入事件。因此，仅添加“v型”会使其停止工作：

我脑子里几乎没有可能的解决方案，但它们都包含大量重复的代码

例如，我可以为每个输入字段添加监视程序，但这将需要大量重复代码（因为我需要为每个输入字段添加监视程序）。我有5个输入字段，所以基本上我需要写5个几乎相同的观察者。如果可能的话，我想避免。。。例如：

watch:{
   number(){
      this.priceMax = this.priceMax.replace(/[^0-9]/g, "");
   }
}

---

是否有任何方法可以解决它，并使它像我的解决方案那样简单，而无需重复代码最好还有防拷贝粘贴的解决方案。欢迎所有建议！提前谢谢

也许你可以试试这个：

---

从该站点：。

我尝试测试一些代码。这里是我的（）：

导出默认值{
名称：“MyInput”，
数据：（）=>{
返回{
价格：“，
priceMax:“
};
},
方法：{
correctNumberInput:函数（事件、数据）{
const name=event.target.name；
让value=String（此[名称]）。替换（/[^0-9]/g，”）；
如果（值）{
此[名称]=parseInt（值，10）；
}否则{
此[名称]=“”；
}
}
}
};
输入{
边框：1px纯黑；
}

代码如下：

correctNumberInput:函数（事件、数据）{
const name=event.target.name；
让value=String（此[名称]）。替换（/[^0-9]/g，”）；
如果（值）{
此[名称]=parseInt（值，10）；
}否则{
此[名称]=“”；
}
}

因此，我使用了您的函数，但我没有更改

事件.target.value

，而是更改

数据。所以我需要知道该数据的名称，这就是为什么我使用输入字段中的
name
属性（
const name=event.target.name；
）

更新

如果我们有
input type=number
，那么它在
@input
回调中有奇怪的（空）值。因此，最好使用键盘过滤器（）：

使用键盘过滤器的主要想法是：

filterDigitKeys:函数（事件）{
const code=window.Event？Event.which:Event.keyCode；
常数是特殊的=
代码===37||
代码===39||
代码===8||
代码===46||
代码===35||
代码===36；
const isDigit=code>=48&&code=96&&code可能会有帮助谢谢你的回答！这些解决方案很好，但对我来说最大的问题是代码的重复。我有5个输入字段，所以基本上我需要编写5个几乎相同的观察者。如果可能的话，我想避免这种情况……谢谢你的回答！不幸的是，这一个没有帮助，因为我想禁止用户键入0-9之间的数字以外的任何字符，而您的解决方案只会将用户输入从字符串转换为数字。非常感谢！这是我一直在寻找的解决方案！非常聪明和优雅。我只是不知道如何这样做，因为我是Vue.js的初学者，不知道如何使用u带“this”的“[]”圣人。通过你的回答，我确实学到了一些新东西！再次感谢！@VasilijeBursac这不是Vue的，这是JS本身的。任何对象实际上都是地图，所以
a.b
和
a['b']
工作原理相同。哦，我不知道这是同一件事。谢谢你的精彩解释！抱歉打扰你，但你知道为什么这个代码不适用于数字输入字段吗？如果你尝试在数字输入字段中键入“e”和“-”等，它仍然显示在字段中，它不会将其替换为“”（空字符串）。我不明白为什么它不起作用，因为我以前在数字域上使用过相同的函数，它工作得很好。请检查添加了数字域的代码：@VasilijeBursac我已将更新添加到我的答案中。检查它