Template Ref Map for Dynamic Child Management

Snippet

Template Ref Map for Dynamic Child Management

When dealing with dynamic lists, assigning a static ref string is insufficient. By using a function ref that populates a Map, you can precisely target specific DOM elements by their unique IDs without relying on array indices which might shift during re-renders.

snippet.js
javascript
const itemRefs = new Map();
const setItemRef = (el, id) => {
  if (el) {
    itemRefs.set(id, el);
  } else {
    itemRefs.delete(id);
  }
};
 
// Usage in template:
// <div v-for="item in items" :key="item.id" :ref="el => setItemRef(el, item.id)">

vue

Breakdown

const itemRefs = new Map();

Initialize a Map to store DOM elements associated with unique identifiers.

const setItemRef = (el, id) => { ... }

A callback function that Vue executes whenever the element is mounted or unmounted.

itemRefs.set(id, el);

Store the element in the map if it exists (mounted).

itemRefs.delete(id);

Remove the entry if the element is null (unmounted).

Previous snippet Next snippet

More Expert JavaScript exercises →

From your library

Template Ref Map for Dynamic Child Management

Related