After migrating to Vue 3, I was disappointed to discover a breaking departure from Vue 2 attribute behavior.
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
<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>
For Vue apps with Custom Elements and/or custom HTML, this is especially important because migrating to Vue 3 may break these components.