Skip to content

Commit b0ca79d

Browse files
authored
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)
1 parent 13e0b25 commit b0ca79d

File tree

1 file changed

+3
-7
lines changed

1 file changed

+3
-7
lines changed

src/breaking-changes/attribute-coercion.md

+3-7
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,12 @@ badges:
55

66
# Attribute Coercion Behavior <MigrationBadges :badges="$frontmatter.badges" />
77

8-
::: info Info
9-
This is a low-level internal API change and does not affect most developers.
10-
:::
11-
128
## Overview
139

1410
Here is a high level summary of the changes:
1511

1612
- Drop the internal concept of enumerated attributes and treat those attributes the same as normal non-boolean attributes
17-
- **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`.
13+
- **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.
1814

1915
For more information, read on!
2016

@@ -30,7 +26,7 @@ In 2.x, we had the following strategies for coercing `v-bind` values:
3026

3127
- 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)).
3228

33-
The following table describes how Vue coerce "enumerated attributes" differently with normal non-boolean attributes:
29+
The following table describes how Vue coerces "enumerated attributes" differently with normal non-boolean attributes:
3430

3531
| Binding expression | `foo` <sup>normal</sup> | `draggable` <sup>enumerated</sup> |
3632
| ------------------- | ----------------------- | --------------------------------- |
@@ -91,7 +87,7 @@ In 2.x, invalid values were coerced to `'true'` for enumerated attributes. This
9187

9288
### Coercing `false` to `'false'` instead of removing the attribute
9389

94-
In 3.x, `null` or `undefined` should be used to explicitly remove an attribute.
90+
In 3.x, `null` or `undefined` should be used to explicitly remove a non-boolean attribute.
9591

9692
### Comparison between 2.x & 3.x behavior
9793

0 commit comments

Comments
 (0)