No warning when string property value is `null`

[chriscasola]

Version

2.4.4

Reproduction link

https://jsfiddle.net/r15ocz2L/1/

Steps to reproduce

1. Run the jsfiddle

What is expected?

I'm not sure exactly, but I think either a console warning, or using the default value for the property, would make sense.

What is actually happening?

Vue silently renders nothing inside the component.

---

I can take a stab at fixing this if it is determined this behavior is indeed a bug.

[yyx990803]

This is because your prop doesn't have required: true. For optional props, null will bypass the type check.

[chriscasola]

This seems like confusing behavior. Why does null bypass the type check? And if it does, why isn't the default value used if the one provided by the binding is null?

Could we warn when this situation occurs?

[Austio]

To me, null is a value that has been purposefully assigned so overwriting it with a default would be unexpected.

[chriscasola]

So I guess my questions is, why does null bypass the type check?

[yyx990803]

Because when you specify a prop with a type but without required: true, you are essentially saying "this prop may not be present, but if it is present, it should be of type String." And null is the value expressing "this type is not present".

Which is to say, if you expect the type check to be enforced in all cases, you should add required: true.

[chriscasola]

If null specifies that "this type is not present" then why isn't the default value used? That seems contradictory.

[yyx990803]

Hmm, yeah so it needs to be more accurate:

• null indicates the value is explicitly marked as not present and it should remain null.
• undefined indicates the value is not present and a default value should be used if available.
• required: true indicates neither null or undefined are allowed (unless a default is used)

I agree this could be confusing, just as the existence of null vs. undefined in the language itself. But the design was trying to stay close to what these values are designed represent in JS, and changing them would be breaking.

[chriscasola]

Would adding a warning in dev mode for this situation be acceptable? That wouldn't be breaking but would help people detect these edge scenarios.

There are three situations which seem unlikely to be desired:

1. A property with a default value and a type requirement, but with a binding value of null
2. A property with a default value but without require: true - why specify a default if the value isn't required, is there really a use case for letting people bypass the default value by binding null?
3. A property with a default value, require: true, a type requirement, and a binding value of null