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>

Answer 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

Answer 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.

Answer 3

As Cato mentioned using a validator can help solve this issue.

You will need to provide a default and make sure required is not set or is false.

<script>
Vue.component('MyInput', Vue.extend({
    props: {
        value: {
            type: [String, Number, Boolean],
            default: null,
            validator: (p) => {
                return ['string', 'number', 'boolean'].indexOf(typeof p) !== -1 || p === null;
            },
        }
    }
});
</script>

This may look like it will work the same as this...

<script>
Vue.component('MyInput', Vue.extend({
    props: {
        value: {
            type: [String, Number, Boolean],
            required: false,
            default: null,
        }
    }
});
</script>

However, in the second example you can pass undefined. In the first you can pass the listed types plus null.