LU08b – Auftrag: Vue.js Accordion erkunden

Ziel: Sie begegnen zum ersten Mal Vue.js-Code. Es geht noch nicht darum, alles zu verstehen – sondern darum, Fragen zu stellen, Muster zu erkennen und zu entdecken, was anders ist als in Vanilla JS.

Vorbereitung

Öffnen Sie das folgende StackBlitz-Projekt:

→ StackBlitz: FAQ Accordion in Vue.js öffnen

Sie sehen drei Dateien:

Ordner Struktur in Vuejs

Aufgabe 1 – Unbekanntes entdecken (5 Min.)

Lesen Sie den Code aller drei Dateien durch. Notieren Sie:

  1. Mindestens drei Dinge, die Sie nicht kennen oder nicht verstehen.
  2. Mindestens zwei HTML-Attribute oder Tags, die Sie so noch nie gesehen haben (Hinweis: schauen Sie im Template-Bereich).

Es ist völlig normal, wenn vieles noch unklar ist. Notieren Sie Ihre Fragen – wir besprechen sie danach gemeinsam.

Aufgabe 2 – ref() untersuchen (5 Min.)

In AccordionItem.vue und Accordion.vue kommt ref() vor: 

const isOpen = ref(false);
 
const faqData = ref([...]);

Beantworten Sie folgende Fragen schriftlich:

  1. Was könnte ref() bewirken? Was passiert wohl, wenn sich der Wert von isOpen ändert?
  2. Was ist der Unterschied zu einer normalen Variable wie const isOpen = false?

Aufgabe 3 – Daten erweitern (5 Min.)

Fügen Sie in Accordion.vue im faqData-Array eine fünfte Frage mit einer eigenen Antwort hinzu: 

{
  question: 'Ihre eigene Frage hier?',
  answer: 'Ihre eigene Antwort hier.',
},

Beobachten Sie, was im Browser passiert, und beantworten Sie:

  1. Was erscheint im Browser, ohne dass Sie das HTML angepasst haben?
  2. Wie haben wir beim alten Vanilla-JS-Accordion ein neues FAQ-Item hinzugefügt? Was ist der Unterschied?

Aufgabe 4 – Zustand verstehen (5 Min.)

Vergleichen Sie, wie der Zustand («offen» oder «geschlossen») gesteuert wird:

Vanilla JS (alt) Vue.js (neu)
Wie wird das Element gefunden? document.querySelectorAll('.accordion-btn') ?
Wo lebt der Zustand? Im DOM (classList.contains('open')) ?
Wie wird umgeschaltet? classList.add('open') ?

Füllen Sie die rechte Spalte mit dem aus, was Sie im Vue-Code finden.

Aufgabe 5 – Den Fehler entdecken (5 Min.)

Testen Sie das Accordion im Browser: Öffnen Sie mehrere Panels nacheinander.

  1. Was funktioniert noch nicht wie erwartet?
  2. Warum könnte das so sein? Schauen Sie sich an, wo isOpen definiert ist – in welcher Datei, und für welche Einheit gilt es?
  3. Was müsste sich ändern, damit immer nur ein Panel offen ist?

Sie müssen das Problem noch nicht lösen – nur erkennen und beschreiben. Das lösen wir gemeinsam in LU09.

Zusammenfassung

Halten Sie zum Abschluss in 2–3 Sätzen fest:

Was ist der grösste Unterschied zwischen dem Vanilla-JS-Accordion und dem Vue-Accordion?