Komponenten

In dieser Aufgabe erstellst du eigene Komponenten und definierst Properties.

Aufgabenstellung

Du entwickelst einen Newsfeed für eine Onlinezeitung. Die Daten werden dir später von einem Backend bereitgestellt. Du erhältst den Titel, einen kurzen Textausschnitt (Teaser) sowie die gesamte Anzahl Wörter eines jeden Newsbeitrags.

Lösungsschritte

Verwende folgenden Vue Playground als Startpunkt für deine Lösung:

Vue SFC Playgroundtinyurl.com

Vue Playground Vorlage

Komponente extrahieren

Das .newsfeed__item Element ist aktuell drei Mal im HTML vorhanden. Es soll noch an zahlreichen anderen Orten auf der Website des Kunden verwendet werden. Deshalb macht es Sinn, dieses HTML in eine eigene Komponente auszulagern.

• Erstelle eine neue NewsfeedItem.vue Komponente

• Verschiebe das HTML eines .newsfeed__item Elements vom App.vue in den <template> Teil der neuen NewsfeedItem.vue Datei.

• Verschiebe alle zum .newsfeed__item gehörenden Styles in den <style> Bereich der neuen Komponente.

• Importiere die neue NewsfeedItem Komponente in der App.vue

• Ersetze alle .newsfeed__item Elemente in der App.vue mit der neu erstellten Komponente.

Lösungshilfe

Dein <template> sollte nun wie folgt aussehen:

<template>
  <h1>Newsfeed</h1>
  
  <div class="box">
    <div class="newsfeed">
      <NewsfeedItem />
      <NewsfeedItem />
      <NewsfeedItem />
    </div>  
  </div>
</template>

Properties definieren

Alle NewsfeedItem zeigen aktuell den selben Inhalt an. Wir brauchen Properties, um den Inhalt dynamisch bestimmen zu können.

• Definiere vier Properties

  • title (String)

  • teaser (String)

  • image (String)

  • numberOfWords (Number)

• Stelle sicher, dass für jede Property nur den erwarteten Datentyp akzeptiert wird

• Setze für jedes <NewsfeedItem> Element in der App.vue die neu erstellten Properties mit Beispielinhalten

• Gebe die Werte der Properties im <template> Bereich der NewsfeedItem.vue an der richtigen stelle aus.

Probleme mit dem Bild?

Das src Attribut von <img> Tags lässt sich nicht mit {{ item.image }} befüllen.

Schaue in den Kursunterlagen zu Properties nach, ob du eine Lösung findest.

Liste rendern

Im App.vue soll die Liste von NewsfeedItem nun dynamisch generiert werden.

• Füge die folgende items Variable im <script setup> Bereich deiner App.vue ein

const items = ref([
  { 
    id: 1,
    title: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr', 
    teaser: 'At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',
    numberOfWords: 512,
    image: 'https://placecats.com/millie_neo/200/200',
  },
  { 
    id: 2,
    title: 'At vero eos et accusam et justo duo', 
    teaser: 'Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.',
    numberOfWords: 1723,
    image: 'https://placecats.com/neo_banana/200/200',
  },
  { 
    id: 3,
    title: 'Consetetur sadipscing elitr, sed diam nonumy eirmod tempor ', 
    teaser: 'labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',
    numberOfWords: 821,
    image: 'https://placecats.com/bella/200/200',
  },
])

• Nutze die items Variable um eine Liste von NewsfeedItem zu generieren

• Stelle sicher, dass die NewsfeedItem die Inhalte aus der items Variable als Properties erhalten und anzeigen.

Werden die Inhalte nicht richtig angezeigt?

Vielleicht übergibst du die Variablen falsch an die Komponente weiter. Schaue in den Unterlagen zu den Properties, ob du ein Beispiel dazu findest.

Lesezeit berechnen

Für jeden Newsbeitrag wissen wir, wie viele Wörter im Inhalt sind. Wir gehen von einer durchschnittlichen Lesegeschwindigkeit von 300 Wörtern pro Minute aus.

• Berechne anhand der numberOfWords Property, wie lange die Lesezeit für den angezeigten Newsbeitrag ist. Du kannst die Lesezeit auf volle Minuten runden.

• Zeige die berechnete Lesezeit an.