DEV Community 👩‍💻👨‍💻

DEV Community 👩‍💻👨‍💻 is a community of 967,611 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
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)

This post blew up on DEV in 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!