Open Maxim-Mazurok opened 11 months ago
I believe this is related to https://github.com/vuejs/core/issues/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
a workaround
{option.value === 0 && <MyCounter key={0} label={'Counter 0'}></MyCounter>}
{option.value === 1 && <MyCounter key={1} label={'Counter 1'}></MyCounter>}
Related plugins
[ ] plugin-vue
[X] 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