From 19270f5c10073824bce2b72f88a24163e8fd78ca Mon Sep 17 00:00:00 2001 From: robin Date: Wed, 3 Jan 2024 10:58:30 +0000 Subject: [PATCH] svelte keys --- docs/md/probleme.md | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/docs/md/probleme.md b/docs/md/probleme.md index 6dab964..8802315 100644 --- a/docs/md/probleme.md +++ b/docs/md/probleme.md @@ -37,3 +37,22 @@ Semantisch arbeiten. ### Warum die Ursache nicht behoben wurde In dem fall liegt der Programmcode fehler nicht bei uns, da die Kompillierung von svelte übernommen wird. + +## Probleme mit Variablen werten in #each loops + +### Problemstellung + +Wenn in einem each block die länge der liste, über die iteriert wurde, verändert wird, kann es zu fehlern kommen, wenn kein einzigartiger key für jedes element angegeben wurde. + +### Ursache + +Die Ursache ist, dass svelte die liste nicht neu rendert, sondern nur die die properties neu zuordnet. Sprich ursprünglich gab es 3 Elemente El1, El2, El3. Wenn nun El1 entfernt wird, wird in der DOM tatsächlich El3 entfernt und die properties von El3 zu El2 und von El2 zu El1 zugewiesen. Das bedeutet, dass nicht reaktive variablen weiterhin den Wert von der vorherigen Komponente beeinhalten! + +### Lösungsansatz + +Die einfachste Lösung wäre eine Id als key zu haben, die einzigartig für das jeweilige Element ist, da svelte dann in der DOM genau das Element entfernt und nicht das letzte. Hat man das nicht und +möchte , dass der inhalt bei Veränderung der Array länge tatsächlich neu gerendert wird, so muss man explizit ein {#key} block drum rum bauen mit den jeweiligen Wert wo es neu gerendert werden soll (key nutzt ebenfalls reactive statements....). + +### Warum die Ursache nicht behoben wurde + +Gibt keine Lösung, da es standard Svelte verhalten ist. Gibt nur den vorgestellten workaround