useTemplateRefsList

v0.0.14testeddemo

Collects 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.

Source Tests

Example

const { refs, set } = useTemplateRefsList<HTMLDivElement>();
// Template: <div v-for="item in items" :key="item.id" :ref="set" />
// refs.value contains all rendered div elements

Demo

Loading demo…

Signature

export function useTemplateRefsList<El extends Element = Element>(): UseTemplateRefsListReturn<El>{ ... }

Type Parameters

Elextends Element= Element

Returns

UseTemplateRefsListReturn<El>An object with a reactive `refs` array and a `set` function