VueJS Using Prop Type Validation With NULL and 'undefined' Values?

Question

Even though VueJS 2 official documentation about prop validation is stating (as a code example's comment line):

// Basic type check (null and undefined values 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>

Solution 1

// Basic type check (null and undefined values 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

Solution 2

It's because of required: true

From API docs (more detail)

required: Boolean Defines if the prop is required. In a non-production environment, a console warning will be thrown if this value is truthy and the prop is not passed.