Version

2.5.13

Reproduction link

http://jsfiddle.net/df4Lnuw6/207/

Steps to reproduce

Specify a required prop with a default value:

Vue.component('comp', {
    template: '<div>{{ typeof x }} {{ x }}</div>',
    props: {
        x: {
            type: Number,
            required: true,
            default: 5,
        },
    },
});

Render the component without specifying a value for that prop:

<comp></comp>

What is expected?

The component should render the following without any prop validation errors:

<div>number 5</div>

What is actually happening?

The component renders OK, but warns about missing required prop x.

While it's true that prop x is not specified, since it has a default value, there should be no warning message.

What exactly does required check for? It appears that it checks two things:

1. The prop should be provided, as in at least <comp :x="..."></comp>.
2. The prop value should be non-null and non-undefined.

I think in the case where a required prop has a default value, (1) should be relaxed.

Otherwise, how can I enforce a prop to never be null while also providing a default value if the prop value was not provided?