Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

:key shorthand incorrectly compiles to UNKEYED_FRAGMENT #10882

Closed
NonSpicyBurrito opened this issue May 7, 2024 · 5 comments · Fixed by #10942
Closed

:key shorthand incorrectly compiles to UNKEYED_FRAGMENT #10882

NonSpicyBurrito opened this issue May 7, 2024 · 5 comments · Fixed by #10942
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. 🐞 bug Something isn't working scope: compiler

Comments

@NonSpicyBurrito
Copy link

Vue version

3.4.27

Link to minimal reproduction

https://play.vuejs.org/#eNp9UE1Lw0AQ/SvDXKpQU1BBKKmg0oMeVNSbKxKSSdw22V12NzES8t+d3dDag/S28z5m37wBb4xJupZwianLrTQeHPnWXAslG6OthwEslTBCaXUDM5bOhMq1ch629ONgFeiT949TodLFtIG9PHhqTJ154gkgLWQH3Vmp7Uog+0CqaBcIyzAuWJUuDiw4R+/4m1JWycZpxfmGsEhgrhsja7JPxkuOIXAJkQlcVtf6+yFi3rY03+H5F+Xbf/CN6wMm8NmSI9uRwD3nM1uRn+j16yP1/N6TjS7amtVHyBdyum5Dxkl226qCYx/oYtr72LJU1Ztb956U2x0VggblGPUCufm7I6f/xb1ILqNPqJFb/OzIhp1cIBPJ+RWOv3pFpHc=

Steps to reproduce

In minimal reproduction, see playground compiled JS.

What is expected?

:key should compile to the same output as :key="key".

What is actually happening?

:key compiles to UNKEYED_FRAGMENT, whereas :key="key" compiles to KEYED_FRAGMENT.

System Info

No response

Any additional comments?

Here is a practical example in playground of how this bug can affect behavior by causing stateful tags and components to be rebuilt and thus losing state.

@haoqunjiang haoqunjiang added 🐞 bug Something isn't working scope: compiler 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. labels May 7, 2024
@quiteeasy
Copy link
Contributor

The issue is caused by not setting the .exp field in transforms/vFor.ts for the key prop. The .exp property is set after all children are traversed. I'm currently working on a solution to address this problem.

@neneodonkor
Copy link

@quiteeasy Very interesting. But I find it strange that folks actually use 'key' to bind to key. 🤔

@NonSpicyBurrito
Copy link
Author

Very interesting. But I find it strange that folks actually use 'key' to bind to key. 🤔

Yeah v-for="key in keys" would be quite rare and is served as simply a minimal reproduction.
A more realistic example would be something where you already have to generate unique keys for a list of objects to iterate through like notifications, and destructure while iterating so you have the choice to simply name it key and use the shorthand:

<div v-for="{ key, title, body, etc } in notifications" :key>
    {{ title }}
    ...
</div>

@neneodonkor
Copy link

Very interesting. But I find it strange that folks actually use 'key' to bind to key. 🤔

Yeah v-for="key in keys" would be quite rare and is served as simply a minimal reproduction. A more realistic example would be something where you already have to generate unique keys for a list of objects to iterate through like notifications, and destructure while iterating so you have the choice to simply name it key and use the shorthand:

<div v-for="{ key, title, body, etc } in notifications" :key>
    {{ title }}
    ...
</div>

Perhaps in this case, but how come it works? I tried and it iterated through the content.

@quiteeasy
Copy link
Contributor

@Doctor-wu, please review my pull request and the comments I've left on yours. I've highlighted some potential areas for improvement in both PRs. Your feedback and collaboration on these suggestions would be greatly appreciated.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. 🐞 bug Something isn't working scope: compiler
Projects
None yet
4 participants