fn
useTemplateRefsList
v0.0.14testeddemoCollects a dynamic list of template refs for use with v-for.
Automatically clears the list before each component update and repopulates it
with fresh element references. Handles both plain DOM elements and Vue component
instances (unwraps $el).
Uses a non-reactive buffer internally to collect refs during the render cycle,
then flushes to a shallowRef in onMounted/onUpdated to avoid triggering
recursive update loops.
Example
ts
const { refs, set } = useTemplateRefsList<HTMLDivElement>();
// Template: <div v-for="item in items" :key="item.id" :ref="set" />
// refs.value contains all rendered div elementsDemo
Loading demo…
Signature
ts
export function useTemplateRefsList<El extends Element = Element>(): UseTemplateRefsListReturn<El>{ ... }Type Parameters
Elextends Element= ElementReturns
UseTemplateRefsListReturn<El>An object with a reactive refs array and a set function| Property | Type | Description |
|---|---|---|
refs | DeepReadonly<ShallowRef<El[]>> | Reactive readonly array of collected template refs |
set | (el: MaybeElement) => void | Ref setter function — bind via :ref="set" in templates |