vuejs / vuejs/core

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

Open
#8,395 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

🔩 p2-edge-case has workaround
Dominant language
TypeScript
Stars
54.4k
Forks
9.2k
Avg merge
1d 5h
Merged PRs (30d)
140

Description

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the minimal reproduction linked in the issue and verify how a ref inside v-for on a template is populated in Vue 3.3.4 versus Vue 2. No source file or test is named, so trace the template-ref handling from the reproduction. Done means the Case 3 ref contains an array of slot elements and the behavior has regression coverage.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.