LU09b – Aufgabe: JavaScript-Objekte und Vue

Bevor Sie mit der Aufgabe beginnen, eine kurze Repetition zu Objekten in JavaScript.

Ein Objekt fasst zusammengehörende Daten unter einem Namen zusammen:

// Ein Objekt mit zwei Eigenschaften
const person = {
  name: 'Anna',
  age: 22,
};
 
// Eigenschaften auslesen (Punkt-Notation)
console.log(person.name); // → 'Anna'
console.log(person.age);  // → 22

Für unsere FAQ-Daten erstellen wir ein Objekt mit den Eigenschaften question und answer:

const faqData = {
  question: 'What is this project?',
  answer:   "It's a small but mighty mission...",
};

1. Lesen Sie die Theorie zu ref() und v-bind auf Moodle (LU09a – Theorie).
2. Erstellen Sie im <script setup> ein Objekt faqData mit den Eigenschaften question und answer.
3. Ersetzen Sie den hartcodierten Text im <template> durch {{ faqData.question }} und {{ faqData.answer }}.
4. Ersetzen Sie v-on:click durch die Kurzform @click und v-bind:class durch die Kurzform :class.
5. (Bonus) Fügen Sie Transitions für height und opacity hinzu (wie im bisherigen FAQ-Accordion).
6. (Bonus) Übernehmen Sie das vollständige Styling aus dem bisherigen FAQ-Accordion.

• Das Panel öffnet und schliesst sich per Klick.
• Frage und Antwort werden aus dem faqData-Objekt gelesen.
• Der Code verwendet die Vue-Kurzformen (: und @).