javascript / intermediate
Snippet
Umgang mit dynamischen Template-Refs in v-for-Schleifen
In Vue 3 kann das ref-Attribut in einer v-for-Schleife eine Funktion annehmen. Dies ermöglicht es Ihnen, Elemente manuell einem Objekt oder Array zuzuweisen, was das Problem der Verwaltung einer dynamischen Anzahl von DOM-Referenzen löst.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
<template><div v-for="id in list" :key="id" :ref="el => { if (el) elements[id] = el }"></div></template><script setup>import { ref, onBeforeUpdate } from 'vue';const elements = ref({});onBeforeUpdate(() => { elements.value = {} });</script>
vue
Erklärung
1
:ref="el => { if (el) elements[id] = el }"
Verwendet eine Funktions-Ref, um das Element zu erfassen und nach ID zu speichern.
2
onBeforeUpdate(() => { elements.value = {} })
Leert die Sammlung vor dem erneuten Rendern, um veraltete Referenzen zu vermeiden.