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>

Ankit Kante · Accepted Answer · 2019-12-01 12:39:24Z

62

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

answered Dec 1, 2019 at 12:39

Ankit Kante

2,1593 gold badges22 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Cato Minor Over a year ago

Note: If you want to also allow null, the use a validator: validator: prop => typeof prop === 'string' || prop === null

James Tan Over a year ago

in vue3, ive declared it this way value: { type: String as PropType<string | null>, default: null, required: false, }

mediafreakch Over a year ago

@JamesTan This leads to another error: "Expected String with value "null", got Null"

James Tan Over a year ago

@mediafreakch is that a vue / ts error?

mediafreakch Over a year ago

@JamesTan Yes, but I figured it's coming from a component deeper down the tree that still had a required: true prop type definition. So if passing down props, make sure all components have the correct prop type definition

tony19 · Accepted Answer · 2022-07-15 20:38:59Z

13

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.

edited Jul 15, 2022 at 20:38

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Dec 1, 2019 at 12:41

Michal Levý

38.7k8 gold badges82 silver badges93 bronze badges

Comments

Ivan · Accepted Answer · 2023-02-07 21:44:35Z

12

PropType with the Vue3

<script lang="ts">

import { defineComponent, PropType } from 'vue'

export default defineComponent({
  components: {
  ...
  },
  name: 'Component',

  props: {
    value: { 
      type: null as unknown as PropType<string | null>,
      default: null, required: false
    }
  }
})

answered Feb 7, 2023 at 21:44

Ivan

5037 silver badges11 bronze badges

2 Comments

genuinefafa Over a year ago

this also works if you use an object, hence type can be type: null as unknown as PropType<string | YourType | null> nice

tinystone Over a year ago

related discussion on vue 3 GitHub issues: vue: define required nullable props #3948

Daniel Morell · Accepted Answer · 2021-03-30 15:03:51Z

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.

Collectives™ on Stack Overflow

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

4 Answers 4

5 Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related