VueJS自定义道具验证功能 [英] VueJS Custom Props Validation Function
问题描述
我是VueJS的新手，所以我一直在关注他们的官员指南。
我可以触发前5个属性验证器，但我似乎无法触发最后一个示例（自定义验证
我的JS文件：
Vue.component 'propValidation'，{
道具：{
//基本类型检查（`null`表示接受任何类型）
propA：Number，
//多种可能的类型
propB：字符串，
//必填字符串
propC：{
类型：字符串，
必填项：true
}，
//数字默认值
propD：{
类型：数字，
默认值：100
}，
//对象/数组默认值应该从
返回//工厂函数
propE：{
type：Object，
default：function（）{
return {message：'hello'}
}
}，
//自定义验证器函数
propF：{
type：Number，
validator：function（value）{
console.log（inside validator：+ value）;
返回值> 10;
}
}
}，
模板：< div> +
< p> PropA（号码）：{{propA}}< / p> +
< p> PropB（[String，Number]）：{{propB}}< / p> +
< p> PropC（要求字符串）：{{propC}}< / p> +
< p> PropD（默认号码）：{{propD}}< / p> +
< p> PropE（默认对象/数组）：{{propE}}< / p> +
< p> PropF（自定义验证器）：{{propF.validator（）}}< / p> +
< / div>
}）;
new Vue（{
el：＃example
}）;
和HTML文件：
< div id =example>
最后结果：
PropC（必需字符串）：需要字符串
PropD（默认编号）： 100
PropE（默认对象/数组）：{not：wee}
PropF（自定义验证器）：
带有警告：
[Vue warn]：无效prop：自定义验证器检查失败propF。
（在组件< propValidation>中找到）
预先致谢
编辑：现在我想到了，是否假设返回'true'作为输出，或者它只是提示它不正确？
我可能一直在寻找这种方式，期望返回值为真/假。
根据文档：
组件可以指定它正在接收的道具的需求。如果不满足要求，Vue将发出警告。这是特别有用的，当你编写一个组件，打算被别人使用。
这里他们说的是应该始终满足您指定的验证器以便该属性正常工作。如果不是，他们会发出警告，就像您遇到的那样。
当您像这样定义验证器时，您说所有输入这个具体的验证器应该大于10.
验证器：函数（值）{
console.log（inside验证器：+ value）;
返回值> 10;
$ b然后，当你将数字5作为值绑定到这个特定的属性时，验证器返回false并发出警告。
I'm new to VueJS, so I've been following their official guide.
I'm able to trigger the first 5 properties validator, but I can't seem to be able to trigger the last example (custom validation function).
my JS file:
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"
});
and the HTML file:
<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>
and finally the result:
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):
with the warning:
[Vue warn]: Invalid prop: custom validator check failed for prop "propF".
(found in component <propValidation>)
Thanks in advance
edit: Now that I think about it, Is it suppose to return 'true' as the output or does it just give a warning that it isn't correct?
I might've been looking at this differently and expecting the return value to be either true/false.
解决方案 According to the docs:
It is possible for a component to specify requirements for the props it is receiving. If a requirement is not met, Vue will emit warnings. This is especially useful when you are authoring a component that is intended to be used by others.
What they're saying here is that the validators you specify, should be met at all times for this property to properly work. If not, they'll emit a warning, just like the one you're experiencing.
When you define the validator like this, you're saying that all input for this specific validator should be larger than 10.
validator: function (value) {
console.log("inside validator: " + value);
return value > 10;
}
Then when you bind the number 5 as value to this specific property, the validator returns false and emits the warning.
这篇关于VueJS自定义道具验证功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
