-
-
Notifications
You must be signed in to change notification settings - Fork 152
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
Missing key in JSX when rendering conditionally unlike v-if #304
Labels
p2-has-workaround 🍰
Bug, but has workaround (priority)
Comments
I believe this is related to vuejs/core#1587 In which this case was handled in the vue compiler core: https://github.com/vuejs/core/blob/2cece5ba1b9b254cface23096d17ed0e1910467d/packages/compiler-core/src/transforms/vIf.ts#L46-L57 |
edison1105
added
p2-has-workaround 🍰
Bug, but has workaround (priority)
and removed
pending triage
labels
Sep 23, 2024
a workaround {option.value === 0 && <MyCounter key={0} label={'Counter 0'}></MyCounter>}
{option.value === 1 && <MyCounter key={1} label={'Counter 1'}></MyCounter>} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Related plugins
plugin-vue
plugin-vue-jsx
Describe the bug
My colleague @tongxuanbao and I found an interesting issue when using JSX in Vue 3 for conditional rendering.
The symptom was that having this code:
would result in
MyCounter
preserving its internal state whenoption
changes. It would receive updated prop as expected, however internal data/ref state inside of the component would not change, and whenoption
changes there would be no unmounting and mounting.The core issue stems from not having a key like
<MyCounter key="1" myprop="1" />
. We have inspected the compiled JavaScript code of vanilla Vue 3 usingv-if
with the compiled code of the latest Vue JSX app and the core difference was that vanilla Vue was addingkey=0
andkey=1
automatically, while the JSX plugin was not.Here's the compiled vanilla Vue code:
And here's the compiled JSX code:
Reproduction
https://stackblitz.com/edit/vitejs-vite-ygezuc?file=src%2FApp.jsx
Steps to reproduce
npm install && npm run dev
System Info
Used Package Manager
npm
Logs
No response
Validations
The text was updated successfully, but these errors were encountered: