Vue.js支持道具验证

Question

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

   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模型时,验证道具的规定方式是什么？

Answer 1

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

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

所述.number改性剂可以让v-bind:value所述的部分v-model方程来处理输入值作为数.

Vue.JS指南中的v-model.number参考在这里.