This content originally appeared on DEV Community and was authored by Jordan Brennan
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>
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">
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>
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.
This content originally appeared on DEV Community and was authored by Jordan Brennan
Jordan Brennan | Sciencx (2021-11-05T21:07:17+00:00) Vue RFC for boolean attribute shorthand. Retrieved from https://www.scien.cx/2021/11/05/vue-rfc-for-boolean-attribute-shorthand/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.