When using JSX to render a slot in a selected loop, the children of slots.default always output the last Element. #12843
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
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
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
The text was updated successfully, but these errors were encountered: