Empty boolean prop not recognised
See original GitHub issueHi! We’ve been using vue-custom-element the last couple of weeks on our new project and we love it! Custom elements are so much more flexible than regular Vue components, and not having to include the Vue runtime is so great.
Unfortunately I did find an inconsistency in how props are handled between Vue and vue-custom-element.
If I have the following prop:
props: {
required: { type: Boolean, default: false }
}
With this HTML code:
<component required></component>
In regular Vue, this code works as expected (this.required
is true), but when doing the same on a custom element, the boolean remained false.
The following is needed to make it work:
<component required="true"></component>
But this pattern actually generates an error in regular Vue (Invalid prop: type check failed
), so it’s not really consistent or intuitive.
Issue Analytics
- State:
- Created 5 years ago
- Comments:8 (2 by maintainers)
Top Results From Across the Web
When using [Boolean, String] props, Boolean does not work ...
Create a component property that has [Boolean, String] types. The HTML5-like attribute doesn't behave like a normal Boolean value anymore, ...
Read more >Null boolean props if not given in Vue? - Stack Overflow
I read false on the console. I would like to get null if the property is not given and the boolean value elsewhere....
Read more >Boolean() constructor - JavaScript - MDN Web Docs
The Boolean() constructor can create Boolean objects or return primitive values of type ... This property is legacy and non-standard and should not...
Read more >A complete guide to React default props - LogRocket Blog
Cover three ways to implement default props in React and provide default values for props that are not required by the component.
Read more >Problem with Boolean prop not reacting on watch sometimes
That's because you've obscured your source of truth. You should only ever rely on one source to determine the state. In your case...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Fixed in https://github.com/karol-f/vue-custom-element/releases/tag/v3.2.2, thanks for reporting!
My problem is that omitting a default value will make it default to
undefined
rather thanfalse
, so while it’s a falsy value (matching!prop
) it won’t matchprop === false
. JSFiddle illustrating this.