© DimaSid/Shutterstock.com
Entwickler Magazin
Formulare und Navigation mit dem Vue Router

Immer auf dem richtigen Pfad

Diesmal geht es in unserer Reihe zu Vue um die Navigation innerhalb einer Applikation. In einer Single Page Application haben Sie ja grundsätzlich das Problem, dass ein Neuladen der Seite beziehungsweise das Navigieren von einer Unterseite zu einer anderen den lokalen State der Applikation im Browser zurücksetzt. Um das zu vermeiden, existieren für alle modernen Frontend Frameworks Erweiterungen, die eine Navigation zwischen verschiedenen Ansichten und damit unterschiedlichen Komponentenbäumen ermöglichen.

Sebastian Springer


Zur Demonstration der Implementierung einer Navigation innerhalb von Single Page Applications erweitern wir zunächst die To-do-Applikation aus den ersten beiden Teilen der Reihe (siehe Entwickler Magazin 4.18 und 1.19) um ein Formular zum Erstellen und Modifizieren von To-dos und steuern es anschließend mit dem Vue Router an. Bevor Sie das Routing für Ihre Applikation implementieren, muss eine Möglichkeit zur Erzeugung von Datensätzen in die Anwendung eingefügt werden. Dazu generieren Sie eine neue Komponente, die Sie unterhalb der To-do-Liste anzeigen. Hierbei handelt es sich um ein einfaches Formular, über das Sie den Titel und den Status einer Aufgabe eingeben können. Wie das in der Applikation aussehen soll, sehen Sie in Abbildung 1.

Abb. 1: Inline-Formular zur Erzeugung neuer Aufgaben

Formulare werden von Vue nativ unterstützt [1]. Das bedeutet, dass Sie keinerlei zusätzliche Pakete installieren müssen. Die wichtigste Funktionalität einer Frontend-Bibliothek wie Vue im Zusammenhang mit Formularen ist die Synchronisierung der Formulareingaben mit den Datenstrukturen der Komponenten. Diese Aufgabe erfüllt die v-model-Direktive. Sie übernimmt das Two-Way Data Binding, über das die Eigenschaften der Komponente mit dem Formular synchronisiert werden.

Neue Aufgaben erzeugen

Der erste Schritt der Implementierung besteht aus der Erzeugung der Formularkomponente. Zunächst legen Sie eine Datei mit dem Namen Form.vue im components-Verzeichnis der Applikation an. Auch diese folgt der Konvention der Single File Components mit der Dreiteilung in Template, JavaScript-Code und Styling. Den Quellcode der Komponente finden Sie in Listing 1.

Listing 1: Die „form“-Komponente offen> erledigt>  import { createNamespacedHelpers } from "vuex"; const { mapActions } = createNamespacedHelpers("todo");import { CREATE_TODO } from "../todo"; export default { methods: { ...mapActions({ createTodo: CREATE_TODO }), handleSubmit() { this.createTodo({ title: this.title, done: this.done }); this.title = ""; this.done = false; } }, data() { return { ti...

Entwickler Magazin
Formulare und Navigation mit dem Vue Router

Immer auf dem richtigen Pfad

Diesmal geht es in unserer Reihe zu Vue um die Navigation innerhalb einer Applikation. In einer Single Page Application haben Sie ja grundsätzlich das Problem, dass ein Neuladen der Seite beziehungsweise das Navigieren von einer Unterseite zu einer anderen den lokalen State der Applikation im Browser zurücksetzt. Um das zu vermeiden, existieren für alle modernen Frontend Frameworks Erweiterungen, die eine Navigation zwischen verschiedenen Ansichten und damit unterschiedlichen Komponentenbäumen ermöglichen.

Sebastian Springer


Zur Demonstration der Implementierung einer Navigation innerhalb von Single Page Applications erweitern wir zunächst die To-do-Applikation aus den ersten beiden Teilen der Reihe (siehe Entwickler Magazin 4.18 und 1.19) um ein Formular zum Erstellen und Modifizieren von To-dos und steuern es anschließend mit dem Vue Router an. Bevor Sie das Routing für Ihre Applikation implementieren, muss eine Möglichkeit zur Erzeugung von Datensätzen in die Anwendung eingefügt werden. Dazu generieren Sie eine neue Komponente, die Sie unterhalb der To-do-Liste anzeigen. Hierbei handelt es sich um ein einfaches Formular, über das Sie den Titel und den Status einer Aufgabe eingeben können. Wie das in der Applikation aussehen soll, sehen Sie in Abbildung 1.

Abb. 1: Inline-Formular zur Erzeugung neuer Aufgaben

Formulare werden von Vue nativ unterstützt [1]. Das bedeutet, dass Sie keinerlei zusätzliche Pakete installieren müssen. Die wichtigste Funktionalität einer Frontend-Bibliothek wie Vue im Zusammenhang mit Formularen ist die Synchronisierung der Formulareingaben mit den Datenstrukturen der Komponenten. Diese Aufgabe erfüllt die v-model-Direktive. Sie übernimmt das Two-Way Data Binding, über das die Eigenschaften der Komponente mit dem Formular synchronisiert werden.

Neue Aufgaben erzeugen

Der erste Schritt der Implementierung besteht aus der Erzeugung der Formularkomponente. Zunächst legen Sie eine Datei mit dem Namen Form.vue im components-Verzeichnis der Applikation an. Auch diese folgt der Konvention der Single File Components mit der Dreiteilung in Template, JavaScript-Code und Styling. Den Quellcode der Komponente finden Sie in Listing 1.

Listing 1: Die „form“-Komponente offen> erledigt>  import { createNamespacedHelpers } from "vuex"; const { mapActions } = createNamespacedHelpers("todo");import { CREATE_TODO } from "../todo"; export default { methods: { ...mapActions({ createTodo: CREATE_TODO }), handleSubmit() { this.createTodo({ title: this.title, done: this.done }); this.title = ""; this.done = false; } }, data() { return { ti...

Neugierig geworden?


    
Loading...

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang