VueJS 使用带有 NULL 和“未定义"值的 Prop 类型验证? [英] VueJS Using Prop Type Validation With NULL and 'undefined' Values?
问题描述
即使 VueJS 2 官方文档关于 prop 验证说明(作为代码示例的注释行):
<块引用>//基本类型检查(null 和 undefined 值将通过任何类型验证)
我在使用 此代码复制 时遇到以下错误 — 为什么会这样?
[Vue 警告]:无效的道具:道具值"的类型检查失败.预期字符串、数字、布尔值，得到 Null<div><h1>{{title}}:</h1><MyInput :value="null"/><脚本>Vue.component('MyInput', Vue.extend({道具: {价值: {类型:[字符串，数字，布尔值]，要求:真实，},},模板:`<select v-model="value"><option value="null">空值</选项><选项值="">空值</选项></选择>`,}));导出默认{数据:() =>({标题:'VueJS 使用带有 NULL 和 `undefined` 值的 Prop 类型验证?}),};
//基本类型检查(
null和undefined值将通过任何类型验证)
这仅适用于未设置 required: true 的情况.在您的代码中，您说需要道具，因此 Vuejs 显示警告
相关讨论:https://forum.vuejs.org/t/shouldnt-null-be-accepted-as-prop-value-with-any-type/63887
Even though VueJS 2 official documentation about prop validation is stating (as a code example's comment line):
// Basic type check (
nullandundefinedvalues will pass any type validation)
I'm getting the following error with this code reproduction — why is that?
[Vue warn]: Invalid prop: type check failed for prop "value". Expected String, Number, Boolean, got Null
<template>
<div>
<h1>{{ title }}:</h1>
<MyInput :value="null" />
</div>
</template>
<script>
Vue.component('MyInput', Vue.extend({
props: {
value: {
type: [String, Number, Boolean],
required: true,
},
},
template: `
<select v-model="value">
<option value="null">
null value
</option>
<option value="">
Empty value
</option>
</select>`,
}));
export default {
data: () => ({
title: 'VueJS Using Prop Type Validation With NULL and `undefined` Values?'
}),
};
</script>
// Basic type check (
nullandundefinedvalues will pass any type validation)
This applies only when required: true is NOT set. In your code, you are saying that the prop is required and so Vuejs is showing the warning
Related discussion: https://forum.vuejs.org/t/shouldnt-null-be-accepted-as-prop-value-with-any-type/63887
这篇关于VueJS 使用带有 NULL 和“未定义"值的 Prop 类型验证?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
