javascript - Prop 的 Vue.js Prop 验证

Question

我有一个带有以下 Prop 声明的子组件:

   props: {
        count: Number,
        maxNum: Number
   }

这通常没问题，但我也将 maxNum 映射到输入字段:

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

因此，即使用户在输入中输入“4”，Vue.js 也会认为它是一个字符串，而实际上如果正确解析它是一个有效数字。

我试过这样做，但在输入“apple”时没有正确失败:

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

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

Answer 1

啊，显然 Vue.JS 实际上提供了一种很好的方法来做到这一点。

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

.number 修饰符让 v-model 方程的 v-bind:value 部分将输入值视为数字.

引用v-model.number in Vue.JS guide is here .