Question

我有一个包含以下道具声明的子组件：

   props: {
        count: Number,
        maxNum: Number
   }

这通常很好，但我也将maxNum映射到输入字段：

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

即使用户放置＆＃34; 4＆＃34;在输入中，Vue.js认为它是一个字符串，而实际上如果解析正确则它是一个有效数字。

我尝试过这样做，但它并没有在输入上正确失败＆＃34; apple＆＃34;：

   props: {
        maxNum: {
            validator: function (v) {
                parseInt(v);
                return true;
            }
        }
   }

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

Answer 1

啊，所以Vue.JS实际上提供了一个很好的方法来做到这一点。

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

.number修饰符允许v-bind:value等式的v-model部分将输入值视为数字。

参考v-model.number in Vue.JS guide is here。

Answer 2

我看到你想出了如何解决你的问题，但我仍然会尝试解释这里出了什么问题。

第1期

我猜你期望parseInt在没有数字的情况下打破输入，但事实并非如此。 parseInt(null)，parseInt('foo')和parseInt([{ bar: 'Baz' }])一切正常，他们只会返回NaN。因此，验证器将始终进入第二行并返回true，从而将任何输入视为有效。要修复它，您必须在输入上运行parseInt并检查它是否返回NaN，因此您的验证器将是这样的：

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

第2期

你并不是在寻找验证器。验证器只检查输入值并确定它们是否有效，它不会以任何方式更改它们。换句话说，上面更正的验证器不会将'13'投射到13，它只会阻止'apple'或undefined之类的输入。 '13'将保持不变，您必须稍后手动投射。

您正在寻找的功能是作为Vue 1中每个组件支柱的可选coerce功能提供的，但它已针对版本2删除。如果您需要以稍微复杂的方式执行此操作您所链接的解决方案不涵盖，官方推荐的方式是simply use a computed value。

Vue.js支持道具验证

2 个答案:

第1期

第2期