Data Flow

In dieser Aufgabe lernst du den Data Flow von Vue mittels Properties und Events kennen.

Aufgabenstellung

Du hattest eine brillante Geschäftsidee: Ein Reddit-Klon, aber spezifisch für IT-Content. Du nennst die Website «Redd-IT».

Eine Designerin hat für dich bereits ein Vue-Projekt vorbereitet und die wichtigsten Komponenten gestaltet.

Es liegt nun an dir, die Funktionalität der Website zu ergänzen.

Lösungsschritte

Verwende folgenden Link um das Vue Projekt herunterzuladen.

Download GitHub directorydownload-directory.github.io

Vue Projekt herunterladen

Projekt Setup

Entpacke das Projekt in einen Ordner und öffne es in VS Code.

Öffne ein neues Terminal und führe folgende Befehle aus, um den Vite Entwicklungsserver zu starten:

npm install
npm run dev

Daten an Komponente übergeben

Die Designerin hat in der App.vue bereits eine <Post> Komponente vorbereitet.

Ergänze in der Post.vue die Props-Deklaration und zeige die vordefinierten Props im <template> an (Der Titel dieses Posts, Der Text dieses Posts etc.)

• Definiere die benötigten Props in der Post.vue

• Gib die vordefinierten Props im <template> Bereich der Post.vue aus

Die Komponente sollte nun so aussehen:

Liste rendern

in der App.vue wurde bereits eine posts Variable für dich vorbereitet. Mit Hilfe von Faker.js werden zufällige Daten für die Posts generiert. Dies ist nützlich, um die Flexibilität des Designs bereits jetzt auf Herz und Nieren zu testen.

• Rendere die posts Liste in der App.vue

• Stelle sicher, dass jeder Listeneintrag eine :key Property erhält. Was könntest Du als :key verwenden? (siehe Dokumentation)

• Übergib title, text, user und votes korrekt an die <Post> Komponente

• Ergänze eine weitere Prop id und übergib die post.id ebenfalls an die <Post> Komponente. Wir benötigen diese später um für einen spezifischen Post zu voten.

Probleme mit den Props?

Suche in den Kursunterlagen zu Properties nach passenden Code-Beispielen.

Die Komponente sollte nun folgenden Output generieren:

Voter implementieren

Die <Post> Komponente hat bereits zwei Buttons für Up- und Downvotes vorbereitet.

Gemäss dem «One-Way Data Flow» von Vue darfst du die votes Prop aber nicht direkt verändern (mit + 1 oder - 1). Die richtige Vorgehensweise ist es, ein voteUp resp. voteDown Event an die Elternkomponente zu senden. Diese kann die Votes aktualisieren und Vue gibt die neuen Votes als Prop wieder an die <Post> Komponente weiter.

• Verwende defineEmits in der Post.vue um die beiden Events voteUp und voteDown zu definieren

• Ergänze den benötigten Code, damit ein Klick auf den 👍-Button ein voteUp Event auslöst. Die ID des Posts muss als Event-Parameter mitgegeben werden.

• Ergänze den benötigten Code, damit ein Klick auf den 👎-Button ein voteDown Event auslöst. Die ID des Posts muss als Event-Parameter mitgegeben werden.

Vue Devtools

Nutze die Vue Devtools in deinem Browser um die Ausführung des Events zu überprüfen!

Events entgegennehmen

Als nächstes müssen die ausgelösten Events in der App.vue verarbeitet werden.

• Ergänze die folgenden beiden Funktionen im <script setup> der App.vue

function voteUp (id) {  
  console.log('voteUp', id)  
}  
  
function voteDown (id) {  
  console.log('voteDown', id)  
}

• Rufe die beiden Funktionen auf, wenn ein Event auf der <Post> Komponente ausgelöst wird. Ergänze dazu folgenden Code

 <Post  
     v-for="post in posts"  
     ...  
+    @voteUp="voteUp"  
+    @voteDown="voteDown"  
/>

Bei einem Klick auf den Up- bzw. Downvote-Button solltest du nun den entsprechenden Output in der JS-Konsole deines Browsers sehen.

Votes aktualiseren

Du erhältst jetzt also den Event und die ID des Posts, dessen votes verändert werden müssen.

Implementiere die voteUp und voteDown Funktionen.

• Nutze .find() um den Post mit der empfangenen id in der posts Variable zu finden

function voteUp (id) {
  const post = posts.value.find(???) // Hier bist du gefragt!
  
  console.log(post)
}

• Erhöhe oder reduziere die .votes Eigenschaft des Posts um 1

An dieser Stelle kannst du mittels einem Klick auf den Up- bzw. Downvote-Button eines Posts die Punktezahl verändern.

Die <Post> Komponente signalisiert mit dem Event eine Änderung an den Votes, welche in der App.vue ausgeführt wird. Vue aktualisiert alle Komponenten dann mit den neuen Daten. Der «One-Way Data Flow» ist also korrekt umgesetzt!

Zusatzaufgabe: Einträge sortieren

Es macht Sinn, die Einträge mit den meisten Punkten zuoberst anzuzeigen.

• Sorge dafür, dass die Einträge von «viel Punkte» nach «wenig Punkte» sortiert angezeigt werden.

Lösungshilfe

Computed Properties sollten dir bei diesem Teil der Aufgabe behilflich sein.

Zusatzaufgabe: Trending- und SPAM-Posts hervorheben

Die Designerin hat für Trending-Posts mit viel Votes (>= 10) und SPAM-Posts mit weniger als 0 Votes bereits zwei spezielle CSS-Klassen post--trending und post--spam vorbereitet.

• Sorge mit Hilfe der Vue.js Dokumentation dafür, dass die beiden Klassen auf dem .post Element abhängig vom aktuellen votes Wert angewendet werden.