Specify which types are allowed as values for 'key' of 'v-for' #1900
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
phanan
requested changes
Dec 6, 2018
src/v2/guide/list.md
Outdated
| @@ -221,7 +221,7 @@ When Vue is updating a list of elements rendered with `v-for`, by default it use | |||
|
|
|||
| This default mode is efficient, but only suitable **when your list render output does not rely on child component state or temporary DOM state (e.g. form input values)**. | |||
|
|
|||
| To give Vue a hint so that it can track each node's identity, and thus reuse and reorder existing elements, you need to provide a unique `key` attribute for each item. An ideal value for `key` would be the unique id of each item. This special attribute is a rough equivalent to `track-by` in 1.x, but it works like an attribute, so you need to use `v-bind` to bind it to dynamic values (using shorthand here): | |||
| To give Vue a hint so that it can track each node's identity, and thus reuse and reorder existing elements, you need to provide a unique `key` attribute for each item. An ideal value for `key` would be the unique id of each item, also avoid using non-primitive values as key, use string/number value instead. This special attribute is a rough equivalent to `track-by` in 1.x, but it works like an attribute, so you need to use `v-bind` to bind it to dynamic values (using shorthand here): | |||
There was a problem hiding this comment.
The added text feels pretty out of place. I'd suggest adding a p.note at the end of the section instead.
There was a problem hiding this comment.
@phanan Good point, but did you mean p.tip? I've updated this PR.
phanan
reviewed
Dec 11, 2018
src/v2/guide/list.md
Outdated
| @@ -233,6 +233,8 @@ It is recommended to provide a `key` with `v-for` whenever possible, unless the | |||
|
|
|||
| Since it's a generic mechanism for Vue to identify nodes, the `key` also has other uses that are not specifically tied to `v-for`, as we will see later in the guide. | |||
|
|
|||
| <p class="tip">Avoid using non-primitive values as key, use string/number value instead.</p> | |||
There was a problem hiding this comment.
Suggested change
| <p class="tip">Avoid using non-primitive values as key, use string/number value instead.</p> | |
| <p class="tip">Don't use non-primitive values like objects and arrays as `v-for` keys. Use string or numeric values instead.</p> |
I know the message is taken directly from Vue's warning, but for documentation purpose, it doesn't need to be that brief ;)
There was a problem hiding this comment.
@phanan Fixed, thanks for suggestion! 👍
phanan
reviewed
Dec 17, 2018
src/v2/guide/list.md
Outdated
| @@ -233,6 +233,8 @@ It is recommended to provide a `key` with `v-for` whenever possible, unless the | |||
|
|
|||
| Since it's a generic mechanism for Vue to identify nodes, the `key` also has other uses that are not specifically tied to `v-for`, as we will see later in the guide. | |||
|
|
|||
| <p class="tip">Don't use non-primitive values like objects and arrays as `v-for` keys. Use string or numeric values instead</p> | |||
There was a problem hiding this comment.
@phanan Fixed, sorry. 🤦♂️
|
Thanks! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
List Rendering guide doesn't mention what types of values user can supply for
keyofv-for. There is a console warning for this already but it's hard to point people to it. This pull request fixes the issue.