javascript / expert
Snippet
Template-Ref-Map für dynamische Child-Verwaltung
Beim Umgang mit dynamischen Listen reicht eine statische Ref-Zeichenfolge nicht aus. Durch die Verwendung einer Funktionsreferenz, die eine Map füllt, können Sie gezielt bestimmte DOM-Elemente über ihre eindeutigen IDs ansprechen, ohne sich auf Array-Indizes verlassen zu müssen, die sich beim erneuten Rendern verschieben könnten.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
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
Erklärung
1
const itemRefs = new Map();
Initialisiert eine Map, um DOM-Elemente verknüpft mit eindeutigen Identifikatoren zu speichern.
2
const setItemRef = (el, id) => { ... }
Eine Callback-Funktion, die Vue ausführt, wenn das Element gemountet oder ungemountet wird.
3
itemRefs.set(id, el);
Speichert das Element in der Map, falls es existiert (gemountet).
4
itemRefs.delete(id);
Entfernt den Eintrag, wenn das Element null ist (ungemountet).