Javascript Vue.js道具的道具验证

我有一个子组件，具有以下props声明：

   props: {
        count: Number,
        maxNum: Number
   }

这通常很好，但我还将

maxNum

映射到具有以下内容的输入字段：

<input type="text" v-model="maxNum" value="maxNum">

---

当涉及到一个v型模型时，验证道具的规定方法是什么？

啊，所以Vue.JS实际上提供了一种很好的方法

<input type="text" v-model.number="maxNum" value="maxNum">

.number

修饰符允许

v-model

等式的

v-bind:value

部分将输入值视为一个数字

---

参考。

我知道您已经找到了解决问题的方法，但我仍将尝试解释此处出现的问题

问题1 我猜您希望

parseInt

在输入中没有数字的情况下中断输入，但事实并非如此

parseInt（null）

，

parseInt（'foo'）

和

parseInt（[{bar:'Baz'}]）

都可以正常工作，它们只会返回

NaN

。因此，您的验证器将始终转到第二行并返回

true

，从而将任何输入视为有效。要修复它，您必须对输入运行

parseInt

，并检查它是否返回

NaN

，因此您的验证器如下所示：

validator: function (v) {
    return !isNan(parseInt(v));
}

问题2 你不是真的在找验证器。验证器只是检查输入值并决定它们是否有效，它不会以任何方式更改它们。换句话说，上面更正的验证器不会将

'13'

强制转换为

13

，它只会阻止像

'apple'

或

未定义的
这样的输入<代码>'13'
将以不变的方式通过，您以后必须手动将其转换

您正在查找的功能是作为Vue 1中每个组件道具上的可选
强制
功能提供的，但在版本2中已将其删除。如果您需要以链接到的解决方案中未涵盖的稍微复杂的方式来执行此操作，官方推荐的方法是

validator: function (v) {
    return !isNan(parseInt(v));
}