Subscribe on changes!

ref inside v-for on template does not populate as an aray

avatar
May 23rd 2023

Vue version

3.3.4

Link to minimal reproduction

https://play.vuejs.org/#eNqdlU2T0zwMgP+KJntoOm+bwFu4hLawAxw4MBw4cNjsMGmttmYT29hOP6bT/46UL9J2YZa92bIsPbIk6xjcGhNtSwySYOqWVhoPDn1p5qmShdHWwxEsrkag1WddKo8CTrCyuoAB3Rp0Wu91YRp5FPOGjdJxquIYdto+OMgc4N7gkm2MIbM2O4BewQSm7G2plfMgPRYOZuwyVGWeD1PVOQ7DIczmwIo6xyjX63Dw/vbrR3iZgMkzqWA7Xmk7GNVWom2WlzgkC09icN5qte5ABKL59ByY/5MmCKmcFHhB1pm9oBManRr4ivIC0km1zvEK0OXaPwtwkoA4qKyQy8qGI6rO1t+oQiEFb2o0ChK8rk6GBMner8huc/+vcK8S1qdiAzJAT+exj0cGW0I4S2soyTfpo0emeTSvpLwoPZn/WUqLDpwuEAptkTAoTxSMxYwCo8Vyk6k1qRirDdr8cBXZN/KaWYpFNAHe3Q/fPCW+10lFXN8dwOgRi22EZC9V07huSuKnTfsmtANYZI5SiPuM405YMuW+q85S3+nCzYv5Slrnp/HZ9TOVl3OHBCsudKZVJ9fqvN3Ybl2Xtc5FXdqwk37DL1GDmFo6SwNJfQCTNOAz3nKsaVCZAZKtyzyzkGtt4HgECadTfdKkrbnVdQ3d5DW9SptVhrwi5OVG77hG+bWpjbgFS6TmPH8nWnePcEV8cyfv5+cgXboIhNctdAf09AcsssMCYUO9TgVHq1w+UBFupHsLSv8j5SUd9QkBtqVfgWbUi8+H/V2zwMlWevfsh0xqVsy5QR4rf1O6TYj0XQTzntunsvfkwSioh9O4yEz0w2lFQ+5YhdQcUBoTqCQsowLhfRpsvDcuieNSmYd1RB9L/I7OYkutLQscC128m0ST6FUspPN9cYSuGC+s3jm05DANRj3bMQm3aMcWlUCL9q++LnT7/i6OrnyyS+qiE4XfzuFHhntvvJcOv/IguBjsnPn621NlsSBXotaawZfFD5oAESt/VN5KdGEjwmbbmgyHw2glc482DO8e8HBffYv/0QrmM3jBg4bd/PGXo09KyG1TYR/6U6spOjrt6i38TpNf7IdcdmfIVIIJXUWuSbHvfp/U33BViT3VVVXO9cfD3XKuTngkbOucslATtat+yZ1+AdAmKpc=

Steps to reproduce

  1. Open reproduction link
  2. Open DevTools
  3. Observe console output

What is expected?

"Case 3" in output would see the ref value being an array - in Vue 2 it behaved this way

What is actually happening?

"Case 3" in output sees the ref value being a single element

System Info

No response

Any additional comments?

The bug manifests itself when we have a component that takes an arbitrary number of slots, and the consuming component populates those slots in a loop but needs an array of refs to the slot contents. The most basic case of this is implemented in the reproduction link.