From b0ca79d6c50ff0202ea781342713b4cba33e2151 Mon Sep 17 00:00:00 2001 From: Damon Muma <damuma@gmail.com> Date: Wed, 21 Dec 2022 12:36:07 -0500 Subject: [PATCH] Clarify boolean attribute behaviour is unchanged The broad wording in a few places fails to draw attention to the fact that `:booleanAttr="false"` will be removed from markup, as in Vue 2. I added a few clarifications to make sure it's clear that this is specifically a change to non-boolean attributes. I also removed the `low-level internal API change` label, because I think it is untrue that this won't affect most developers. HTML attributes changing from not being present to being present with a value of`"false"`, could easily have consequences, especially somewhat invisibly for screen-readers, for attributes like `aria-label`, `aria-labelledby`, `id`, etc For instance: with a binding like `<label for="input">Email</label><input id="input" :aria-label="needsCustomAriaLabel && makeAriaLabel(input)">` the label of the input for a screenreader will change from "Email" to "false" between vue 2 and 3) --- src/breaking-changes/attribute-coercion.md | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/src/breaking-changes/attribute-coercion.md b/src/breaking-changes/attribute-coercion.md index dcb9a7c..50d84fa 100644 --- a/src/breaking-changes/attribute-coercion.md +++ b/src/breaking-changes/attribute-coercion.md @@ -5,16 +5,12 @@ badges: # Attribute Coercion Behavior <MigrationBadges :badges="$frontmatter.badges" /> -::: info Info -This is a low-level internal API change and does not affect most developers. -::: - ## Overview Here is a high level summary of the changes: - Drop the internal concept of enumerated attributes and treat those attributes the same as normal non-boolean attributes -- **BREAKING**: No longer removes attribute if the value is boolean `false`. Instead, it's set as attr="false". To remove the attribute, use `null` or `undefined`. +- **BREAKING**: No longer removes non-boolean attribute if the value is boolean `false`. Instead, it's set as attr="false". To remove the attribute, use `null` or `undefined`. Handling of [boolean attributes](https://meiert.com/en/blog/boolean-attributes-of-html/) remain untouched. For more information, read on! @@ -30,7 +26,7 @@ In 2.x, we had the following strategies for coercing `v-bind` values: - For other attributes, we remove "falsy" values (`undefined`, `null`, or `false`) and set other values as-is (see [here](https://github.com/vuejs/vue/blob/bad3c326a3f8b8e0d3bcf07917dc0adf97c32351/src/platforms/web/runtime/modules/attrs.js#L92-L113)). -The following table describes how Vue coerce "enumerated attributes" differently with normal non-boolean attributes: +The following table describes how Vue coerces "enumerated attributes" differently with normal non-boolean attributes: | Binding expression | `foo` <sup>normal</sup> | `draggable` <sup>enumerated</sup> | | ------------------- | ----------------------- | --------------------------------- | @@ -91,7 +87,7 @@ In 2.x, invalid values were coerced to `'true'` for enumerated attributes. This ### Coercing `false` to `'false'` instead of removing the attribute -In 3.x, `null` or `undefined` should be used to explicitly remove an attribute. +In 3.x, `null` or `undefined` should be used to explicitly remove a non-boolean attribute. ### Comparison between 2.x & 3.x behavior