VueJS 使用带有 NULL 和“未定义”值的道具类型验证？

Question

即使 关于道具验证的 VueJS 2 官方文档 正在说明（作为代码示例的注释行）：

// 基本类型检查（ null 和 undefined 值将通过任何类型验证）

我在 此代码复制 中收到以下错误 - 为什么会这样？

 [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>

原文由 ux.engineer 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

// 基本类型检查（ null 和 undefined 值将通过任何类型验证）

这仅适用于 required: true 未设置时。在您的代码中，您说该道具是必需的，因此 Vuejs 显示警告

相关讨论： https ://forum.vuejs.org/t/shouldnt-null-be-accepted-as-prop-value-with-any-type/63887

原文由 Ankit Kante 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

这是因为 required: true

来自 API 文档（更详细）

required: Boolean 定义是否需要道具。在非生产环境中，如果该值是真实的并且没有传递道具，则会抛出控制台警告。

原文由 Michal Levý 发布，翻译遵循 CC BY-SA 4.0 许可协议