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

When using JSX to render a slot in a selected loop, the children of slots.default always output the last Element. #12843

Open
nuagecen opened this issue Feb 10, 2025 · 2 comments
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. has workaround A workaround has been found to avoid the problem

Comments

@nuagecen
Copy link

nuagecen commented Feb 10, 2025

Vue version

3.5.13

Link to minimal reproduction

https://play.vuejs.org/#eNqlVMFu00AQ/ZXFFzuSZVMCl+CmAlSJIpUiqMQhjiorniRL17vW7jpNlfqMOHDq3yDB30TiM5jdtR0HVRGouWRn583M88zb2XivyjJaVeCNvETNJC01UaCrcpxyWpRCarIhEuakJnMpCuIj1O9cF5UG2Tii2FrRF7X2X3aIc5rnDDqIM009g0n5THClSaEW5NhUCfy3wJggn4Vk+RN/kPIkdqSQDhoaipJlGtAiJLH17BENl3k80aD0NGkKOZwjhuck7iXwQk8rrD+nC+QsODZgY+CpNxNFSRnIi1JT5Jd6I2I9xpchvZt39k7LCsL2fraE2fUD99gNc5d6HyQokCtIvc6nM7kA7dynn97DGs+dsxB5xRB9wPkRlGCV4ehgryuO3yx7OMv2zE6C8sWlOl1r4Kr9KEPUIGuLTz2cypsDn76jO4ye27iU19jFM87d2LGDnWRymFNu0wkOXIcPaCjlsLZoxGYVs//9mMBW5lkBI+LbIj4SNXdWoEEpRalCrAUFxQKKCY1mprVUpB60vJ3CZkvKcgm8kRkKy3klZpKcBANyPG4jMKZBR6uMVYAxNnfU8DyJEH53RybTFh/HTSGB2mZiEfi/f91vv/7Y/rzffvveZhv54V+ZkUYvwQ3lubiJsqis1DLYR06eTk+i9gqNfmS/8D9GHQzpmtO1J8nparzZB9ZJbG4dEpXgZFQPUBC7R26Wyv6btXNs36xpK4mbR9p69h4pmv+9lGyibuN06rSKcxJr1B1sWnWd33aq81E7e2sHP6hbbAcVvnyMvs9vL3FxGYG38r4y0rbC66m5r9d2SMugPRHiV8zlcL/JUUiehWQ4jYqsDAKKne1HumifUVTmhlzD7YgYCE5yX/HBYNBLujtbPbmx2z5drUCa7YJtGkYvoqOhV/8BBjUaUQ==

Steps to reproduce

Image

After looping three times, the elements in the children of slots.default all point to the last one.

When the Vue version is 3.4+, it outputs correctly, but all versions of 3.5 have this issue. (like this: https://play.vuejs.org/#eNqlVFFv0zAQ/ismL0mlKAEGLyXrBGgSQxpDMImHppqi5tqaOXZkO12nLs+IB572b5Dg30ziZ3C24yxFUwWiL83dfXf3+fz5tsHLuk7WDQTjIFNzSWtNFOimnuScVrWQmmyJhAVpyUKKioQIDfvQWaNBdoEktVbyWW3CFz3ilJYlgx7iTNPPYHI+F1xpUqklOTRdovANMCbIJyFZ+Sgc5TxLHSmkg4aGqmaFBrQIyWw/+4mGqzzJVF1wQsvDPHiSB5OpBqVnWAS9k6xr77IdXfzO0kHZIA60QlYLusSTCI5j2Rp4HsxFVVMG8qzWFFnnwZjYiIkVSPrqrfVp2UDs/fMVzC8f8OOMjC8P3ktQINeQB31MF3IJ2oWPP76DDX73wUqUDUP0nuAHUII1hqODvWo4nlkOcJbtib0fypfn6nijgSt/KEPUIFuLzwO8q9d7jn5P9yB5ZvNy3uIUTzh3YsAJ9kIqYUG5LSc4cB0/oKycw8aiEVs0zP4PcyLbmRcVjElom4RI1PisbKNailrF2Asqig0UExrNQmupSDvyvJ3u5ivKSgm8Ex/KzUUlVpKcRCNyOPEZmNOhk3XBGsAcWzvpeB4lCL+5IdOZx6dp10ig4plYRuGvn7d3X77f/bi9+/rNVxuH8R+VkcagwBXlpbhKiqRu1CraRU4fz44S70JjmDls/JdZe1P64fTjyUq6nmx3gW2WGq9DohKcjNoRCuL+6ZtVs/uS7T36l2zGStLukfrIziNF859XlS3U76FenVZxTmKduqOtV9fpda+6ELWzs4zwQP2626vw1f/o+/T6HPeXEbiX94WRthXeQM1DvfpLWkX+i5CwYa6G+02fxORpTA5mSVXUUURxssNMlx0yisrckku4HhMDwZvcVXw0Gg2K3n9bPblrt3O6WIM02wXHhCsiOXgetL8Bvd4hMg==

I also found that when the input is text or a basic element like span, div, etc., as long as their content and attributes are exactly the same, this issue also occurs. (like this: https://play.vuejs.org/#eNqlVFFv0zAQ/ismL0mlKGEUXkrWCdAkhjSGYBIPTTVFzbU1c+zIdrpOXZ4RDzzt3yDBv6nEz+BsJ2mKpgq0vMR3993d5/Nnb7xXZRmtKvBGXqJmkpaaKNBVOU45LUohNdkQCXNSk7kUBfER6nehi0qDbAJRbK3oi1r7LzvEOc1zBh3EmaafwaR8JrjSpFALcmy6BP5bYEyQz0Ky/Ik/SHkSO1JIBw0NRckyDWgRkth+domGqzxOVJlxQvPj1DtKvfFEg9JTLILecdK0d9mOLq6TuFfWCz2tkNWcLnAnguNYNgaeejNRlJSBvCg1RdapNyI2YmIZkr55Z31aVhC2/tkSZtcP+HFGxpd6HyQokCtIvS6mM7kA7cKnn97DGtddsBB5xRB9IPgRlGCV4ehgryuOe5Y9nGV7Zs+H8sWlOl1r4KrdlCFqkLXFpx6e1ZsDW9/RHUbPbV7Ka5ziGedODDjBTkg5zCm35QQHrsMHlJVyWFs0YrOK2X8/J7CdeVbAiPi2iY9Ejc/KNiilKFWIvaCg2EAxodHMtJaK1IOWt9PdbElZLoE34kO5uajESpKTYECOx20G5jToaJWxCjDH1o4anicRwu/uyGTa4uO4aSRQ8UwsAv/3r/vt1x/bn/fbb9/baiM//Ksy0ugVuKE8FzdRFpWVWgb7yMnT6UnUutDoZ/Yb/2PWwZRuON14kpyuxpt9YJ3ExuuQqAQno3qAgthdffPU7N9ke47tTTZjJXFzSdvI3iVF87+fKluoe4c6dVrFOYk16g42rbrObzvV+aidvccIN9Q9dwcVvnyMvs9vL/H9MgJv5X1lpG2F11NzX6/tIS2DdkWIXzFXw32To5A8C8lwGhVZGQQUJ9vPdNk+o6jMDbmG2xExEDzJfcUHg0Gv6G5t9eSO3c7pagXSvC44pmH0IjoaevUfvdYhLw==)

However, if I add attributes like key or others, it outputs correctly.

Could this be due to Vue 3.5 optimizations related to the virtual DOM?

What is expected?

When looping, the corresponding tag can be correctly accessed through slots.default.

What is actually happening?

The children of slots.default always output the last element of the loop.

System Info

Any additional comments?

No response

@nuagecen
Copy link
Author

nuagecen commented Feb 10, 2025 via email

@edison1105 edison1105 added the 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. label Feb 10, 2025
@edison1105
Copy link
Member

related PR #11067

test('cache inside default slot', () => {
const root = transformWithCache(`<Foo>{{x}}<span/></Foo>`)
expect((root.codegenNode as VNodeCall).children).toMatchObject({
properties: [
{
key: { content: 'default' },
value: {
type: NodeTypes.JS_FUNCTION_EXPRESSION,

@edison1105 edison1105 added the has workaround A workaround has been found to avoid the problem label Feb 13, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. has workaround A workaround has been found to avoid the problem
Projects
None yet
Development

No branches or pull requests

2 participants