Templates und Datenbindung

Templates und Datenbindung

0:00 Bisher haben wir über Struktur gesprochen — über Komponenten und ihren Schnitt. Heute gehen wir in die Komponente hinein, genauer gesagt in ihr Template. Das ist der Ort, an dem Ihr Zustand sichtbar wird, und es ist der Teil von Vue, den Sie im Alltag am häufigsten schreiben werden. Wir sehen uns an, wie man Attribute an Daten bindet, wie man auf Klicks reagiert, wie man Bedingungen und Schleifen formuliert und wie man abgeleitete Werte sauber berechnet.

0:25 Es ist ein umfangreiches Modul — dafür können Sie danach fast alles, was ein Template hergibt.

Grundlagen der Vue Template Syntax

0:31 Anfangen wollen wir mit dem Grundsätzlichen: Was ist ein Vue-Template eigentlich? Die Antwort ist erfreulich unspektakulär, und genau das ist die Stärke. Sie werden sehen, dass Sie fast nichts Neues lernen müssen — es kommen nur zwei Erweiterungen zu etwas hinzu, das Sie längst kennen. Wichtig ist in diesem Kapitel vor allem eine Regel, die viele zunächst als Einschränkung empfinden und die sich später als Wohltat herausstellt.

0:56 Ein Vue-Template ist gültiges HTML. Das ist keine Nebenbemerkung, sondern eine bewusste Entscheidung des Frameworks: Sie schreiben weiterhin die Sprache, die Sie kennen, und ergänzen sie an zwei Stellen. Erstens durch Text in doppelten geschweiften Klammern, zweitens durch besondere Attribute, die Direktiven heißen. Was daraus wird, ist keine Vorlage, die zur Laufzeit interpretiert wird — Vue übersetzt das Template beim Bauen in eine Funktion und weiß dabei genau, welcher Teil der Ausgabe von welchem Wert abhängt.

1:25 Genau dieses Wissen macht die Aktualisierungen später so gezielt. Drei Zeilen, drei Werkzeuge. Oben die einfache Textausgabe, in der Mitte eine Direktive, die über die Anzeige entscheidet, unten eine, die rohes HTML einsetzt. Die letzte verdient eine Warnung, und deshalb steht sie hier: Sie schaltet den Schutz ab, den Vue Ihnen sonst automatisch gibt.

1:47 Bei normaler Textausgabe wird alles, was nach Markup aussieht, unschädlich gemacht. Bei dieser Direktive nicht. Wenn dort Inhalt landet, den ein Nutzer irgendwo eingegeben hat, haben Sie eine Sicherheitslücke geöffnet — und zwar eine der ältesten und häufigsten überhaupt. Die Grenze verläuft zwischen Ausdruck und Anweisung. Ein Ausdruck ergibt einen Wert — rechnen, vergleichen, eine Funktion aufrufen.

2:12 Eine Anweisung tut etwas — eine Variable anlegen, eine Schleife starten, verzweigen. Im Template ist nur Ersteres erlaubt, und zwar genau eines. Der praktische Ausweg für Bedingungen steht in der linken Spalte: der Fragezeichen-Doppelpunkt-Ausdruck. Und noch ein Detail, das gelegentlich überrascht: Sie kommen im Template nicht an beliebige globale Objekte heran.

2:34 Eine Handvoll ist erlaubt, alles Weitere müssen Sie importieren oder als Wert bereitstellen. Ich habe diese Einschränkung anfangs als Gängelung empfunden — bis ich das erste Mal ein Template gepflegt habe, in dem jemand fünf verschachtelte Bedingungen untergebracht hatte. Der zweite Punkt nennt den Kern: Was im Markup steht, lässt sich nicht testen. Sie können keine Funktion aufrufen, die es nicht gibt.

2:58 Also verschiebt man alles, was mehr als einen Gedanken enthält, ins Skript — als abgeleiteten Wert oder als Funktion. Dort ist es benannt, dort ist es prüfbar, und im Template steht nur noch, wie das Ergebnis heißt. Der zweite Punkt erwischt fast jeden einmal: Man will einen Wert in ein Attribut schreiben und nimmt dafür die doppelten geschweiften Klammern — die funktionieren aber nur im Textbereich, nicht im Attribut.

3:22 Dort brauchen Sie eine Bindung, und die kommt gleich im nächsten Kapitel. Der erste Punkt ist der ernste: Rohes HTML mit Nutzerinhalt ist die Eintrittskarte für Cross-Site Scripting. Wenn Sie es brauchen — etwa für formatierte Texte aus einem Redaktionssystem —, dann nur mit Inhalt aus einer Quelle, der Sie vertrauen, und am besten zusätzlich gefiltert.

Datenbindung mit v-bind

3:42 Jetzt zum ersten der beiden Werkzeuge, die Sie täglich verwenden werden. Attributbindung klingt nach einer Kleinigkeit, ist aber die Grundlage für praktisch alles Dynamische in einer Oberfläche — Bilder, Verweise, deaktivierte Knöpfe, Klassen, Stile. Wir sehen uns die Schreibweisen an, und darunter ist eine, die es erst seit Kurzem gibt und die Ihnen Tipparbeit spart.

4:03 Außerdem klären wir einen Sonderfall, über den in reinem HTML viele stolpern: das Verhalten von Attributen, die nur an oder aus kennen. Der interessante Teil dieser Definition ist der Sonderfall bei den booleschen Attributen. In HTML gilt ein Attribut wie disabled als gesetzt, sobald es überhaupt da ist — der Wert spielt keine Rolle.

4:24 Wer also disabled gleich false schreibt, deaktiviert den Knopf trotzdem. Vue nimmt Ihnen diese Fußangel ab: Bei einem Wert, der als unwahr gilt, entfernt es das Attribut ganz. Sie können also guten Gewissens einen Wahrheitswert binden und bekommen genau das Verhalten, das Sie erwarten. Vier Zeilen, die Ihnen im Alltag ständig begegnen. In der ersten sehen Sie Langform und Kurzform direkt nebeneinander — beide tun dasselbe, die Kurzform ist die übliche.

4:51 Interessant ist die letzte Zeile: Sie können ein ganzes Objekt binden, und Vue verteilt dessen Felder auf die entsprechenden Attribute. Das ist sehr praktisch, wenn eine Komponente eine Sammlung von Attributen weitergeben soll, ohne jedes einzeln aufzuzählen. Achten Sie bei der dritten Zeile auf die Schreibweise mit den Rückwärts-Anführungszeichen: Das ist normales JavaScript, kein Vue-Sonderzeichen.

5:14 Fünf Schreibweisen, und die dritte ist die jüngste — sie gibt es seit Vue 3.4. Wenn der Wert genauso heißt wie das Attribut, dürfen Sie sich die Wiederholung sparen. Klingt nach einer Kleinigkeit, summiert sich aber in Formularen mit vielen Feldern. Die vierte Zeile ist die exotischste und wird selten gebraucht: Auch der Name des Attributs darf aus einer Variable kommen.

5:36 Das ist praktisch für generische Bausteine, die erst zur Laufzeit wissen, welches Attribut sie setzen sollen — aber es macht Templates auch schwerer lesbar. Der erste Punkt ist der Klassiker: ein vergessener Doppelpunkt. Ohne ihn ist der Wert eine schlichte Zeichenkette, und wenn Sie eine Zahl erwartet haben, kommt eine Zeichenkette an.

5:56 Das führt zu Fehlern, die eigenartig aussehen — Vergleiche schlagen fehl, Rechnungen ergeben Unsinn. Der zweite Punkt ist die Kehrseite der booleschen Regel von vorhin: Ein leerer String gilt in HTML als gesetzt, nicht als leer. Und der letzte Punkt betrifft die Objektform: Bei mehrfach gesetzten Attributen gewinnt die spätere Angabe — die Reihenfolge ist also bedeutsam.

Event Handling mit v-on

6:18 Das Gegenstück zur Bindung: das Reagieren auf Ereignisse. Auch hier gibt es eine Langform und eine Kurzform, und auch hier gibt es eine Besonderheit, die Vue von reinem JavaScript unterscheidet — die Modifikatoren. Die nehmen Ihnen Standardcode ab und machen zugleich sichtbarer, was Sie eigentlich vorhaben. Sehen wir uns beides an.

6:38 Und wir klären eine Kleinigkeit, die im Alltag verblüffend oft für Ratlosigkeit sorgt: die Frage, ob hinter einen Handler Klammern gehören oder nicht. Zwei Formen sind erlaubt, und der Unterschied ist wichtig. Schreiben Sie nur einen Funktionsnamen, bekommt die Funktion automatisch das Ereignisobjekt übergeben. Schreiben Sie einen Aufruf mit eigenen Argumenten, entscheiden Sie selbst, was ankommt — und wenn Sie das Ereignisobjekt dabei auch brauchen, gibt es dafür eine besondere Variable.

7:06 Diese Unterscheidung ist der Grund für einen Fehler, den fast jeder einmal macht: Ein Funktionsname mit angehängten leeren Klammern ruft die Funktion auf, übergibt aber nichts. Dazu gleich mehr bei den Stolpersteinen. Vier Zeilen mit vier Varianten. Die dritte ist die, auf die es ankommt: Ein Formular, dessen Absenden abgefangen wird.

7:26 Ohne diesen Zusatz lädt der Browser die Seite neu — das ist sein völlig korrektes Standardverhalten seit dreißig Jahren, in einer Single Page Application aber genau das Falsche, denn Ihr gesamter Zustand ist danach weg. Die letzte Zeile zeigt einen Tastenmodifikator: Der Handler feuert nur bei einer bestimmten Taste. Das erspart Ihnen die Abfrage im Code und macht die Absicht im Markup sichtbar.

7:49 Fünf Modifikatoren, die den Großteil des Alltags abdecken. Die ersten beiden kennen Sie aus reinem JavaScript als Methodenaufrufe auf dem Ereignisobjekt — hier stehen sie als Zusatz am Attribut. Interessant ist der vierte: Er lässt den Handler nur feuern, wenn das Ereignis wirklich am Element selbst entstanden ist und nicht bei einem Kind.

8:08 Das ist die eleganteste Lösung für einen Dialog, der sich beim Klick auf den Hintergrund schließen soll, aber nicht beim Klick auf seinen Inhalt. Verketten dürfen Sie sie übrigens. Man könnte einwenden, dass hier Logik ins Markup wandert — und der Einwand ist berechtigt. Der Unterschied liegt darin, was für Logik das ist.

8:27 Modifikatoren beschreiben die Behandlung des Ereignisses, nicht Ihre Fachlogik. Ob ein Formular neu lädt oder nicht, ist keine Geschäftsregel. Der Gewinn ist, dass die Absicht dort steht, wo das Ereignis entsteht, und der Handler frei von immer gleichem Standardcode bleibt. Achten Sie beim Verketten auf die Reihenfolge: Sie wird der Reihe nach angewandt und ist deshalb nicht beliebig vertauschbar.

8:50 Der erste Punkt ist der, den ich vorhin angekündigt habe, und er kostet regelmäßig zehn Minuten Suche. Klammern hinter dem Funktionsnamen bedeuten: Ruf diese Funktion mit genau diesen Argumenten auf. Ohne Argumente heißt das, die Funktion bekommt nichts — auch nicht das Ereignisobjekt. Der letzte Punkt ist ähnlich fies: Ereignisnamen sind kleingeschrieben, weil HTML keine Groß-Klein-Unterscheidung bei Attributen kennt.

9:15 Wer einen Namen in gemischter Schreibweise notiert, bekommt keinen Fehler — der Handler wird nur nie aufgerufen.

Kurzschreibweisen für Bindings

9:23 Ein sehr kurzes Kapitel, aber eines, das ich nicht überspringen möchte. Denn wenn Sie fremden Vue-Code lesen, werden Sie fast nur die Kurzformen sehen — und wer die Langform gelernt hat und die Kurzform nicht wiedererkennt, stolpert über jedes zweite Attribut. Drei Zeichen, mehr ist es nicht, aber sie prägen das Erscheinungsbild von Vue-Templates ganz erheblich.

9:43 Dazu kommt eine Regel, welche Direktiven überhaupt eine Kurzform haben — und warum ausgerechnet die Strukturangaben keine bekommen haben. Drei Direktiven haben eine Kurzform: Bindung, Ereignis und Slot. Ich möchte einen Satz hervorheben, weil er in Diskussionen immer wieder auftaucht: Die Kurzform ist nicht schlechterer Stil.

10:02 Sie ist die übliche Schreibweise, sie steht so in der Dokumentation, und die allermeisten Projekte verwenden sie durchgängig. Wenn Sie sich innerhalb eines Projekts auf eine Form einigen, ist das wichtiger als die Frage, welche. Ein Mischbetrieb macht vor allem eines schwer: das Durchsuchen des Codes. Fünf Zeilen, und die dritte greift vor — Slots kommen erst in Modul 7. Merken Sie sich für den Moment nur, dass die Raute in Vue-Templates eine feste Bedeutung hat.

10:30 Der wichtige Hinweis steht unten: Andere Direktiven haben keine Kurzform. Bedingungen und Schleifen schreiben Sie immer aus. Das ist kein Versäumnis, sondern sinnvoll — es sind Strukturangaben, die man beim Überfliegen sofort erkennen soll, und ein Sonderzeichen wäre dafür schlechter als ein lesbares Wort. Der dritte Punkt ist so trivial wie ärgerlich: ein Leerzeichen zwischen Doppelpunkt und Attributnamen.

10:54 Das Ergebnis ist ein Attribut mit dem Namen Doppelpunkt und ein zweites ohne Wert — und keine Fehlermeldung. Der letzte Punkt betrifft eher exotische Umgebungen: Das At-Zeichen ist in HTML-Attributen ungewöhnlich, und manche Werkzeuge, etwa ältere Vorlagensysteme auf dem Server, stolpern darüber. In einem reinen Vite-Projekt ist das kein Thema, in einer gemischten Umgebung gelegentlich schon.

Computed Properties effektiv einsetzen

11:17 Jetzt kommt eines der wichtigsten Werkzeuge im ganzen Seminar. Abgeleitete Werte sind der Punkt, an dem sich saubere von unsauberer Vue-Programmierung trennt — nicht weil sie schwierig wären, sondern weil viele sie zu selten verwenden und stattdessen Zustand doppelt führen. Wir sehen uns an, was sie können, wo der Unterschied zu einer gewöhnlichen Funktion liegt und welche Regel dabei gilt.

11:38 Wenn Sie aus diesem Modul nur eine Sache mitnehmen, dann bitte diese: Was sich ableiten lässt, wird abgeleitet und nicht gespeichert. Der Kern steckt im Wort merken. Ein abgeleiteter Wert rechnet nicht bei jedem Zugriff neu, sondern nur dann, wenn sich eine seiner Grundlagen geändert hat. Stellen Sie sich einen Kassenbon vor: Die Summe steht unten drauf, und solange niemand einen Artikel hinzufügt, müssen Sie sie nicht neu addieren.

12:03 Genau so verhält sich ein abgeleiteter Wert. Eine gewöhnliche Methode dagegen rechnet jedes Mal — und in einem Template, das mehrfach neu rendert, kann das spürbar werden. Ein typisches Beispiel: eine Anzahl, die sich aus einer gefilterten Liste ergibt. Der Punkt, auf den es ankommt, ist ein konzeptioneller: Diese Zahl ist kein eigener Zustand.

12:24 Sie könnten sie natürlich in einer eigenen Variable führen und bei jeder Änderung der Liste nachziehen — und genau das ist der Fehler, den man vermeiden will. Denn dann haben Sie zwei Wahrheiten, die auseinanderlaufen können. Abgeleitete Werte lösen das, indem sie die Ableitung zur einzigen Beschreibung machen und die Aktualisierung Vue überlassen.

12:44 Die entscheidende Zeile ist die vorletzte: Argumente. Ein abgeleiteter Wert nimmt keine entgegen — er ist ja ein Wert, keine Funktion. Wenn Sie also etwas brauchen, das je Element einer Liste anders rechnet, ist das eine Methode oder eine Funktion, die einen abgeleiteten Wert zurückgibt. Der Hinweis unten deutet das an. Und noch ein praktisches Erkennungsmerkmal: Im Template steht ein abgeleiteter Wert ohne Klammern, eine Methode mit.

13:11 Wer beim Lesen fremden Codes darauf achtet, sieht sofort, was gemeint ist. Das ist die seltenere Variante, und sie sieht ungewöhnlich aus: ein abgeleiteter Wert, dem man etwas zuweisen kann. Der Lesevorgang setzt den Wert zusammen, der Schreibvorgang zerlegt ihn wieder und verteilt die Teile auf die Quellen. Das klassische Beispiel ist genau dieses — ein voller Name aus Vor- und Nachname.

13:34 Brauchen werden Sie es vor allem bei Formularen, wenn ein Eingabefeld an einen zusammengesetzten Wert gebunden werden soll. Für den Normalfall bleibt es beim reinen Lesen; ein Schreibvorgang ist die begründete Ausnahme. Der erste Punkt ist der, den man sich merken sollte: Sie wissen nicht genau, wann und wie oft die Ableitung läuft. Das ist Absicht — Vue optimiert das.

13:55 Wenn in der Berechnung aber etwas passiert, das die Welt verändert, dann hängt das Verhalten Ihrer Anwendung plötzlich von einer Optimierung ab, die Sie nicht kontrollieren. Der schlimmste Fall ist der zweite Punkt: Eine Zustandsänderung in der Ableitung kann dazu führen, dass sie sich selbst erneut auslöst. Solche Schleifen zu finden ist unangenehm.

14:16 Der erste Punkt ist ein Aha-Erlebnis für viele: Ein abgeleiteter Wert, der die aktuelle Uhrzeit liest, wird nie aktualisiert. Und zwar nicht, weil Vue etwas falsch macht, sondern weil die Uhrzeit keine reaktive Quelle ist — es gibt nichts, was Vue beobachten könnte. Der dritte Punkt ist eine handfeste Falle: Sortieren und Umkehren verändern das Original.

14:37 Wenn Sie das in einer Ableitung tun, ändern Sie damit Ihren Zustand — genau das, was Punkt zwei verbietet. Vorher eine Kopie ziehen, dann ist alles in Ordnung.

Dynamische Darstellung von Daten

14:47 Ein kurzes Kapitel, das einen Punkt festzurrt, der bisher nur nebenbei vorkam: das Verhältnis zwischen einem reaktiven Wert im Skript und seiner Darstellung im Template. Dort gibt es einen kleinen Unterschied in der Schreibweise, über den zu Beginn wirklich jeder stolpert. Ich möchte ihn hier klar benennen, damit er Sie später nicht überrascht — und dazu sagen, welche Ausnahme es von der Regel gibt.

15:09 Denn die Ausnahme ist es, die im Alltag die Zeit kostet. Der Satz, den ich hervorheben möchte, ist der letzte: Vue aktualisiert genau das, was nötig ist — nicht die ganze Seite. Das klingt technisch, hat aber eine angenehme Folge für Sie: Sie müssen sich über die Kosten einer Zustandsänderung praktisch keine Gedanken machen.

15:29 Wenn sich ein Name ändert, wird der Textknoten mit dem Namen ersetzt, sonst nichts. Der Eingabefokus bleibt erhalten, die Scrollposition bleibt erhalten, laufende Animationen bleiben erhalten. Wer aus Zeiten kommt, in denen man Bereiche komplett neu gezeichnet hat, weiß das zu schätzen. Und hier der Unterschied, den ich angekündigt habe. Im Skript sprechen Sie den Wert über eine Eigenschaft an, im Template schreiben Sie einfach den Namen.

15:55 Das wirkt zunächst inkonsequent, hat aber einen guten Grund: Im Template wäre der Zusatz reines Rauschen — dort gibt es nichts anderes als Werte. Vue packt deshalb beim Rendern automatisch aus. Aber Achtung, und das ist der wichtigste Satz zu diesem Thema: Das gilt nur für Werte auf oberster Ebene. Steckt ein reaktiver Wert in einem Objekt oder einem Array, greift die Vereinfachung nicht.

16:18 Der erste und der zweite Punkt gehören zusammen und sind die häufigste Ursache für ein sonderbares NaN auf dem Bildschirm. Sie vergessen den Zusatz im Skript, rechnen mit dem Behälter statt mit dem Wert — und bekommen keinen Fehler, sondern Unsinn. Der letzte Punkt ist eher eine Stilfrage: Sie dürfen Zustand direkt im Template ändern, etwa in einem Klick-Handler. Für einen Zähler ist das in Ordnung.

16:40 Sobald es mehr als eine Zuweisung wird, gehört es in eine benannte Funktion — dann ist auch nachvollziehbar, was passiert.

Bedingte Darstellung mit v-if und v-show

16:48 Jetzt zu den Bedingungen. Vue bietet dafür zwei Direktiven an, die auf dem Bildschirm dasselbe Ergebnis liefern und sich technisch grundlegend unterscheiden. Diese Unterscheidung ist eine der wenigen Stellen, an denen Sie im Alltag wirklich eine Entscheidung treffen müssen — und sie ist einfach zu treffen, wenn man den Unterschied einmal verstanden hat.

17:07 Es gibt dafür sogar eine Faustregel, die auf einen Satz passt und die Sie sich merken können. Der Unterschied in einem Bild: Die eine Variante baut das Zimmer ab, die andere schließt nur die Tür. Bei der ersten existiert bei falscher Bedingung wirklich nichts — kein Element, keine Kindkomponente, kein Listener. Bei der zweiten ist alles da und nur unsichtbar geschaltet.

17:28 Beides sieht für den Betrachter gleich aus. Die Kosten liegen an verschiedenen Stellen: Abbauen und Wiederaufbauen kostet beim Umschalten, Immer-da-sein kostet beim ersten Rendern. Daraus ergibt sich die Faustregel des Kapitels. Oben sehen Sie eine vollständige Verzweigung mit drei Zweigen, unten die einfache Sichtbarkeitsschaltung.

17:48 Der wichtige Hinweis steht in der Fußzeile: Die Folgeteile einer Verzweigung müssen unmittelbar auf den vorherigen folgen. Wenn zwischen den Zweigen ein anderes Element steht, erkennt Vue den Zusammenhang nicht mehr und meldet einen Fehler. Das ist derselbe Gedanke wie in einer Programmiersprache — auch dort steht das else direkt am if. Nur fällt es im Markup leichter, versehentlich etwas dazwischenzuschieben.

18:12 Fünf Zeilen, und die entscheidende ist die zweite: faul gegen immer. Wenn die Bedingung beim ersten Rendern nicht erfüllt ist, tut die erste Variante gar nichts — der Inhalt entsteht erst, wenn er das erste Mal gebraucht wird. Das ist bei einem aufwendigen Dialog, den die meisten Nutzer nie öffnen, ein echter Gewinn. Die Faustregel steht unten und ist leicht zu merken: Häufiges Umschalten spricht für die Sichtbarkeitsvariante, seltenes oder nie für die echte Bedingung.

18:39 Der letzte Punkt ist der, den man kennen muss, weil er beides sein kann — Vorteil und Überraschung. Zustand in einem ausgeblendeten Bereich geht verloren. Wenn dort ein halb ausgefülltes Formular steht und der Nutzer kurz wegschaltet, ist die Eingabe weg. Das ist manchmal genau richtig, etwa bei einem Dialog, der frisch starten soll.

18:58 Und manchmal ist es genau falsch. Wenn Sie den Zustand behalten wollen, ist die Sichtbarkeitsvariante die einfachere Antwort — oder Sie heben den Zustand eine Ebene höher. Der dritte Punkt hat schon manche Datenbank mit unerwarteten Werten gefüllt: Mit der Sichtbarkeitsvariante bleiben Formularfelder im Dokument und werden beim Absenden mitgeschickt, auch wenn sie niemand gesehen hat.

19:19 Bei einem klassischen Formular ist das ein echtes Problem. Der zweite Punkt ist ein Hinweis auf das nächste Kapitel: Bedingung und Schleife auf demselben Element vertragen sich schlecht, weil die Bedingung zuerst ausgewertet wird und die Laufvariable dann noch nicht kennt.

Listenrendering mit v-for

19:34 Listen sind das Brot- und Buttergeschäft jeder Oberfläche — Suchergebnisse, Tabellenzeilen, Menüpunkte. Vue macht das erfreulich einfach, und trotzdem gibt es genau eine Sache, die man dabei richtig machen muss und die viele als lästige Pflicht abtun. Ich möchte Ihnen zeigen, warum sie das nicht ist, sondern der Kern der ganzen Mechanik.

19:54 Wer sie versteht, versteht damit auch, wie Vue überhaupt entscheidet, was beim Aktualisieren neu gebaut wird. Die Direktive selbst ist schnell erklärt: Sie läuft über ein Array, ein Objekt oder einen Zahlenbereich und erzeugt für jeden Durchlauf ein Element. Der interessante Teil ist das Attribut, das dabei gesetzt werden muss — der Schlüssel. Er muss stabil sein und ein einfacher Wert, also eine Zahl oder eine Zeichenkette.

20:18 Über den Grund reden wir gleich ausführlich, aber so viel vorweg: Ohne ihn kann Vue beim Aktualisieren nicht unterscheiden, welches gerenderte Element zu welchem Datensatz gehört. Drei Varianten. Oben über ein Array, mit Laufvariable und Index. In der Mitte über ein Objekt, wo Sie Wert und Schlüssel bekommen. Unten über einen Zahlenbereich — und dort steckt eine kleine Falle, die in der Fußzeile steht: Die Zählung beginnt bei eins, nicht bei null.

20:45 Wer das übersieht, baut eine Paginierung, die um eine Seite verschoben ist. Übrigens dürfen Sie in der Laufvariable auch gleich zerlegen und sich einzelne Felder herausziehen — das ist normales JavaScript und funktioniert genauso. Hier ist der Grund, den ich angekündigt habe. Wenn Sie eine Liste umsortieren und Vue keinen Schlüssel hat, ordnet es nach Position zu.

21:08 Der Datensatz an Stelle drei wird also mit dem Element an Stelle drei zusammengebracht — auch wenn das ein völlig anderer ist. Solange die Elemente nur Text anzeigen, fällt das nicht auf. Sobald darin ein Eingabefeld steckt, bleibt die Eingabe an der Position und wandert damit zum falschen Datensatz. Der dritte Punkt ist die Pointe: Der Index als Schlüssel hilft nicht, er ist ja auch nur die Position.

21:31 Das ist die Lösung für den Konflikt von vorhin. Sie ziehen die Schleife auf ein Hüllelement, das selbst nicht gerendert wird, und die Bedingung auf das eigentliche Element darin. Damit ist die Reihenfolge eindeutig: erst laufen, dann prüfen. Beachten Sie, wo der Schlüssel steht — am Hüllelement, denn dort ist die Schleife.

21:50 Ehrlicherweise ist das aber nur die zweitbeste Lösung. Meist ist es besser, gar nicht erst im Template zu filtern, sondern schon vorher einen abgeleiteten Wert mit der gefilterten Liste zu bilden. Der erste Punkt ist eine Entwarnung, die vielen entgangen ist: Sie müssen ein Array nicht auf besondere Weise verändern. Die üblichen Methoden erkennt Vue, und ein komplett neu zugewiesenes Array funktioniert genauso — Vue erkennt sogar wieder, welche Elemente es weiterverwenden kann.

22:18 Der zweite Punkt gibt der Index-Diskussion die nötige Differenzierung: Bei einer Liste, die sich nie sortiert und aus der nichts entfernt wird, ist der Index völlig harmlos. Problematisch wird er genau dann, wenn sich die Reihenfolge ändern kann.

Formatierung und Transformation von Daten

22:32 Zum Abschluss des Moduls eine Frage, die im Alltag ständig auftaucht: Wo gehört die Formatierung hin? Ein Datum soll deutsch aussehen, ein Betrag mit Eurozeichen erscheinen, eine Liste sortiert sein. Es gibt dafür eine klare Antwort und eine Falle, in die man leicht tappt — nämlich, das formatierte Ergebnis gleich zu speichern. Sehen wir uns beides an.

22:53 Und wir klären dabei eine Frage, die Umsteiger aus Vue 2 regelmäßig stellen: Wo sind eigentlich die Filter geblieben? Die Regel lautet: Der Zustand hält Rohwerte. Eine Zahl bleibt eine Zahl, ein Datum bleibt ein Datum. Die schöne Darstellung entsteht erst bei der Anzeige. Der Grund ist einfach: Mit einem formatierten Wert können Sie nicht mehr rechnen, nicht mehr vergleichen, nicht mehr sortieren.

23:17 Und ein Nachtrag für alle, die von Vue 2 kommen: Die Filter mit dem senkrechten Strich gibt es nicht mehr. Sie wurden ersatzlos entfernt — bewusst, denn eine importierte Funktion tut dasselbe und ist obendrein auffindbar. Hier sehen Sie den empfohlenen Weg: eine gewöhnliche, exportierte Funktion. Sie verwendet die Formatierungsschnittstelle, die jeder Browser mitbringt — die kennt die Regeln für Tausendertrennung, Währungssymbole und Datumsformate für so ziemlich jede Sprache.

23:45 Das ist deutlich besser, als so etwas selbst zu bauen. In der Komponente importieren Sie die Funktion und rufen sie im Template auf, ganz ohne Zwischenschritt. Ein Hinweis für später: Solche Formatierer kosten beim Erzeugen etwas Zeit, deshalb nicht in jeder Schleifenrunde neu anlegen. Vier Fälle, vier Antworten. Die Unterscheidung zwischen der ersten und der zweiten Zeile ist die wichtigste: Eine Ableitung hängt an Ihrem Zustand und soll sich merken, was sie ausgerechnet hat.

24:13 Eine reine Formatierung hängt nur an ihrem Eingabewert und darf eine ganz normale Funktion sein. Die dritte Zeile enthält die Warnung von vorhin noch einmal: Sortieren in einer Ableitung nur mit einer Kopie. Und die Fußzeile ist für alle, die noch Vue-2-Code im Kopf haben: Der senkrechte Strich ist Geschichte. In dieser Aufgabe kommt alles zusammen, was wir heute besprochen haben: Schleife, Ableitung, Formatierung.

24:38 Der eigentliche Prüfstein steht im Erfolgskriterium, und zwar in der zweiten Hälfte: Der ursprüngliche Zustand muss unverändert und unsortiert bleiben. Das ist der Test darauf, ob Sie die Kopie gezogen haben. Wer es vergisst, merkt es nicht sofort — die Anzeige stimmt ja. Aber die Quelle ist dann still verändert, und der Fehler zeigt sich irgendwann an einer ganz anderen Stelle.

25:01 Der erste Punkt ist der Kernfehler dieses Kapitels: formatierte Werte im Zustand. Es fühlt sich effizient an, den fertigen Text zu speichern — und spätestens beim ersten Sortieren nach Betrag steht man ratlos da. Der letzte Punkt betrifft eine Bequemlichkeit, die im Team zu Verwirrung führt: Wenn Sie ohne Sprachangabe formatieren, richtet sich das Ergebnis nach den Einstellungen des jeweiligen Rechners.

25:23 Auf Ihrem Gerät sieht es richtig aus, auf einem Testserver in einer anderen Region nicht.

Das Template beherrscht

25:29 Das war ein umfangreiches Modul, fassen wir es zusammen. Im Template gilt: ein Ausdruck je Bindung, alles Größere gehört ins Skript. Bindung und Ereignisbehandlung tragen den Alltag, meist in Kurzform. Abgeleitete Werte merken sich ihr Ergebnis, Methoden rechnen jedes Mal neu. Und Listen brauchen einen stabilen Schlüssel. Im nächsten Modul dreht sich die Richtung um: Bisher haben wir Daten angezeigt, ab jetzt nehmen wir welche entgegen.

25:56 Es geht um Formulare — und um eine Direktive, die vieles davon zusammenfasst.