Vue: Minor bug with Boolean props casting: undefined => false

[frandiox]

Vue.js version

2.1.10

Reproduction Link

https://jsfiddle.net/nymhjosc/

Steps to reproduce

Simply omit a Boolean prop and the value will be casted to false.

What is Expected?

I'd expect to have an undefined property just to know that the user didn't provide it (since it is not a required prop). Basically, I would expect both myProp and missingProp in the previous example to be the same.

What is actually happening?

When the prop is not provided its content is casted to false. Also, some other values like '' are casted to true (somewhat related to #4538) but I guess this is intended. I'm using default: undefined for now.

[posva]

Since you give the prop a Boolean type, it's normal to have a false value for the missing prop. What bothers me more is the undefined value passed to a Boolean prop not being cast to a boolean or getting an error. The same happens with null

[znck]

@posva Sometimes undefined is required.

I use it for modals so parent can control the state of modal with prop a value and if prop is undefined then parent can trigger by open event.

[posva]

@znck Yeah, I cannot remind where I read something similar, but being able to explicitly pass undefined to any type of prop is probably a feature

[znck]

being able to explicitly pass undefined to any type of prop is probably a feature

Passing undefined works, the bug is when a prop is not provided by user component then naturally it is expected to be undefined.

[posva]

I don't think so, because we're asking for a Boolean type, so a missing prop is false, which is more intuitive.
To keep undefined when the prop is missing we can just use a null type

[simplesmiler]

@znck yeah, but what is the purpose of default then, when would it be called?

---

EDIT: Nevermind, the issue is not about default.

[frandiox]

@posva Honestly, the same way a missing String prop does not become '', I would expect a missing Boolean to be undefined and not false. But I guess it's a matter of opinion.

And the other thing I pointed out

some other values like '' are casted to true

is also kind of weird to me. In JavaScript an empty string is a falsy value.

[yyx990803]

The boolean casting follows the same rule of a boolean attribute: presence of any value are casted to true, absence means false.

Personally I think it's a bad idea to differentiate a "3rd state" for boolean props.

[realcarbonneau]

Although I highly respect all of your opinions and knowledge, I would like to present a different view.

As a developer, I may want to know if a Boolean prop was defined or not.
Here are two examples:
1) As a component developer for external use, I may want to build some logic to determine if the property was defined or not for various internal checks and robustness. And, it is not realistic to impose the use of :my-bool="undefined", especially when trying to make a component robust and flexible. Fortunately, there is a workaround that does not impose external changes, that is to explicity set the default to undefined: boolProp: {type: Boolean, default: undefined}

2) A multi-value prop that includes a boolean value may be desired. For example happyIcon: [Boolean, String]. This simplifies the usage of the component (which assumes happy by default) with the following example scenarios for the prop:
a) false: no icon displayed
b) undefined, defined or true: display the default icon
c) string: custom icon name

However, since vue forces undefined to false, I cannot manage case b since I cannot observe the undefined state and would be forced to add a second prop, thus requiring two props (Boolean and String) to do something that could be done with one. Additionally, I cannot just ask the user to pass a string "false" or "true" in the string since this could be an icon name.

Since undefined is fasly, there is no negative impact in keeping it, however, there is a loss of functionality by removing it.

As an additional irritant, if I define a Boolean and String prop with undefined as a default and the prop is defined, the component receive an empty string instead of the expected true value. (Maybe I should submit this as a seperate issue?)

    bsu: { 
      type: [Boolean, String], 
      default: undefined
    },

See the following jsfiddle for the examples: https://jsfiddle.net/realcarbonneau/daxs9722/