DEV Community 👩‍💻👨‍💻

Cover image for Vue RFC for boolean attribute shorthand
Jordan Brennan
Jordan Brennan

Posted on

Vue RFC for boolean attribute shorthand

After migrating to Vue 3, I was disappointed to discover a breaking departure from Vue 2 attribute behavior.

Previously, false would result in the removal of an attribute:

Template
<m-dialog :open="showDialog">

DOM if true
<m-dialog open>

DOM if false
<m-dialog>
Enter fullscreen mode Exit fullscreen mode

This was simple and intuitive, but no longer works in all cases.

Whether template expression or the output of a method or computed, the value used for setting an unknown boolean attribute has to be refactored to produce null instead of false:

<m-dialog :open="showDialog || null">
Enter fullscreen mode Exit fullscreen mode

Vue has its reasons for the breaking change, which include the much-needed removal of some special behavior for three specific HTML attributes.

I have my reasons why I think Vue over-corrected.

Vue of course wins here, so that's what has led to a proposal to add a new ? shorthand binding option to get consistent boolean attribute behavior:

Template
<m-dialog ?open="showDialog">

DOM if true
<m-dialog open>

DOM if false
<m-dialog>
Enter fullscreen mode Exit fullscreen mode

You can read the RFC here and if you like it you can upvote here.

For Vue apps with Custom Elements and/or custom HTML, this is especially important because migrating to Vue 3 may break these components.

Top comments (0)

🤔 Did you know?

 
🌚 Dark mode is available in Settings.