Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m291:learningunits:lu11:theorie:a_fetching_data [2026/05/10 23:49] – gkoch
+++ de:modul:m291:learningunits:lu11:theorie:a_fetching_data [2026/05/11 00:04] (aktuell) – gkoch
@@ Zeile 23: / Zeile 23: @@
 Die Lösung: **asynchrones JavaScript** – der Browser wartet auf die Daten, aber der Rest der App läuft währenddessen weiter.
+{{:de:modul:m291:learningunits:lu11:theorie:async.png?direct&900| Async JavaScript}}
@@ Zeile 106: / Zeile 108: @@
 </WRAP>
+<WRAP round box 80% center>
 ^ Direktive ^ Wann wird dieses Element angezeigt? ^
 | ''v-if="isLoading"'' | Solange die Daten noch geladen werden |
@@ Zeile 112: / Zeile 115: @@
 Diese drei Blöcke schliessen sich gegenseitig aus – Vue zeigt immer nur einen davon an.
+</WRAP>
 ===== Der vollständige Ablauf =====
@@ Zeile 131: / Zeile 134: @@
         ↓
 . isLoading = false  →  Ladeanzeige verschwindet
-</code>
-</WRAP>
-===== Hinweis: Änderung der Props =====
-<WRAP important round>
-Im neuen Code werden ''question'' und ''answer'' als **separate Props** übergeben – nicht mehr als ein ''faq''-Objekt:
-<code html>
-<!-- Neu -->
-<AccordionItem :question="item.question" :answer="item.answer" />
-</code>
-Das bedeutet: ''AccordionItem.vue'' muss angepasst werden. Ersetzen Sie ''defineProps({ faq: Object })'' durch:
-<code javascript>
-defineProps({
-  question: String,
-  answer: String
-})
-</code>
-Und im Template von ''AccordionItem.vue'':
-<code html>
-<button>{{ question }}</button>
-<div class="panel">{{ answer }}</div>
 </code>
 </WRAP>