LU09 – Aufgabe: JavaScript-Objekte und Vue

Theorie: JavaScript-Objekte

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...",
};

Aufgabe

Auftrag

  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.

Erwartetes Ergebnis