Question

我是VueJS的新手，所以我一直关注他们的official guide。

我能够触发前5个属性验证器，但我似乎无法触发最后一个示例（自定义验证函数）。

我的JS档案：

Vue.component('propValidation', {
    props: {
        // basic type check (`null` means accept any type)
        propA: Number,
        // multiple possible types
        propB: String,
        // a required string
        propC: {
            type: String,
            required: true
        },
        // a number with default value
        propD: {
            type: Number,
            default: 100
        },
        // object/array defaults should be returned from a
        // factory function
        propE: {
            type: Object,
            default: function () {
                return { message: 'hello' }
            }
        },
        // custom validator function
        propF: {
            type: Number,
            validator: function (value) {
                console.log("inside validator: " + value);
                return value > 10;
            }
        }
    },
    template:"<div>" +
    "<p>PropA (Number): {{propA}}</p>" +
    "<p>PropB ([String, Number]): {{propB}}</p>" +
    "<p>PropC (Require String): {{propC}}</p>" +
    "<p>PropD (Default Number): {{propD}}</p>" +
    "<p>PropE (Default Object/Array): {{propE}}</p>" +
    "<p>PropF (Custom Validator): {{propF.validator()}}</p>" +
    "</div>"
});

new Vue({
    el:"#example"
});

和HTML文件：

<div id="example">
    <prop-validation :prop-a="200" prop-b="string" prop-c="Require String" :prop-e="{not:'wee'}" :prop-f="5"></prop-validation>
</div>

最后结果：

PropA (Number): 200
PropB ([String, Number]): string
PropC (Require String): Require String
PropD (Default Number): 100
PropE (Default Object/Array): { "not": "wee" }
PropF (Custom Validator):

警告：

[Vue warn]: Invalid prop: custom validator check failed for prop "propF". (found in component <propValidation>)

提前致谢

编辑：现在我考虑一下，是否假设将'true'作为输出返回，或者只是发出警告说它不正确？我可能会以不同的方式看待这一点，并期望返回值为真/假。

Answer 1

根据文件：

组件可以为其接收的道具指定要求。如果未满足要求，Vue将发出警告。当您创作供其他人使用的组件时，这尤其有用。

他们在这里说的是，您指定的验证人应始终满足此属性正常工作。如果没有，他们会发出警告，就像您正在经历的那样。

当您像这样定义验证器时，您说这个特定验证器的所有输入都应该大于10.

        validator: function (value) {
            console.log("inside validator: " + value);
            return value > 10;
        }

然后，当您将数字5作为值绑定到此特定属性时，验证程序将返回false并发出警告。

Answer 2

您可能想要结帐vue-properties：

import {biggerThan} from 'vue-properties';

export default {
    props: {
        canDrink: {
            type: Integer, 
            validator: biggerThan(18)
        },
    }
}

VueJS自定义道具验证功能

2 个答案: