Skip to content

useTemplateRef Fails to Populate Ref Array When Slot Content Is Rendered in v-for #12489

Open
@jhillacre

Description

@jhillacre

Vue version

3.5.12, 5a5406d

Link to minimal reproduction

https://play.vuejs.org/#...

Steps to reproduce

  1. Click "Add Item" in either the "Old Syntax" or "New Syntax" sections.
  2. Observe:
    • New Syntax: Ref array remains null or only references the last item.
    • Old Syntax: Focus and scroll behavior work correctly.

What is expected?

useTemplateRef populates myNewItemRefs with an array of referenced elements after they are rendered.

What is actually happening?

useTemplateRef populates myNewItemRefs with the last rendered instance of the referenced element.

System Info

My local vue is running in a WSL instance:

  System:
    OS: Linux 5.15 Fedora Linux 39 (Container Image)
    CPU: (16) x64 11th Gen Intel(R) Core(TM) i7-11800H @ 2.30GHz
    Memory: 22.53 GB / 25.44 GB
    Container: Yes
    Shell: 5.2.26 - /bin/bash
  Binaries:
    Node: 20.18.1 - ~/.nvm/versions/node/v20.18.1/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v20.18.1/bin/yarn
    npm: 10.9.0 - ~/.nvm/versions/node/v20.18.1/bin/npm
    pnpm: 9.14.4 - ~/.nvm/versions/node/v20.18.1/bin/pnpm
  npmPackages:
    vue: ^3.3.9 => 3.5.12

Any additional comments?

The documentation specifies that useTemplateRef should support v-for, with no mention of exceptions for slots. If this behavior is intentional, the documentation should explicitly state it. Otherwise, this represents an inconsistency with prior behavior and expectations.

Metadata

Metadata

Assignees

No one assigned

    Labels

    need documentationNot necessarily a bug, but proper documentation is needed

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions