Weiter und zurück

Um ein anderes Foto zu sehen, musst du jetzt die Lightbox schließen und eine andere Kachel anklicken. Zwei weitere Buttons in der Lightbox machen es schneller: Einer geht zum vorherigen Foto, der andere zum nächsten.

Die Aufgabe. Füge der Lightbox zwei Buttons hinzu, zum Beispiel unter der Bildunterschrift: einen mit der Klasse zurueck und einen mit der Klasse weiter. Ihr Text kann ← und → sein oder Zurück und Weiter. Wie der Button zum Schließen gehören sie der Lightbox und ändern selbst nichts: Sie senden die Ereignisse zurueck und weiter, und App.vue wählt ein anderes Foto aus. Die Lightbox muss nicht einmal wissen, welches Foto sie zeigt.

Nach dem letzten Foto geht weiter zum ersten, und vor dem ersten geht zurueck zum letzten, du kannst also immer wieder im Kreis gehen. Die Kachel des gezeigten Fotos ist wie bisher die ausgewählte.

Ein Tipp: Merkt sich App.vue die Position des ausgewählten Fotos im Array, liegt das nächste Foto an der Position, die um eins höher ist, und die letzte Position ist fotos.length - 1.

Das ist das ganze Projekt. Deine Galerie besteht aus drei Komponenten, und jede hat ihre eigene Aufgabe. Fotokachel zeigt das Foto, das sie in einer Prop bekommt, und sagt mit einem Ereignis, dass sie angeklickt wurde. Lightbox ist ein Rahmen: Sie zeigt, was App.vue ihr über ihre Slots gibt, und ihre Buttons senden nur Ereignisse. Die Daten und die Entscheidungen stehen in App.vue: welche Fotos es gibt und welches ausgewählt ist. Größere Vue-Apps sind genauso aufgebaut, nur mit mehr Komponenten. In der nächsten Lektion, Lebenszyklus und Daten, laden deine Komponenten Daten von einem Server, wenn sie auf der Seite erscheinen, und stoppen ihre Timer, wenn sie verschwinden.