Übung – Binden von Daten an Formulare

  • 4 Minuten

Hier aktualisieren Sie eine fiktive Anwendung, mit der Benutzer Kreuzfahrten in den Weltraum buchen können. Sie fügen dazu ein Formular hinzu, um einem Benutzer die Möglichkeit zu geben, eine Reise zum Mond zu buchen.

Klonen Sie das Starter-Repository und sehen Sie sich den Code an

Dieses Modul verfügt über ein zugeordnetes Starter-Repository. Dank dieses Starters können Sie sich ausschließlich auf die Konzepte in diesem Modul konzentrieren.

Hierzu müssen Git und Visual Studio Code installiert sein. In Visual Studio Code benötigen Sie die Live Server-Erweiterung.

Klonen Sie das Starter-Repository und öffnen Sie den Ordner in Visual Studio Code, indem Sie den folgenden Code ausführen.

git clone https://github.com/MicrosoftDocs/mslearn-vue-data-events
cd mslearn-vue-data-events/starter
code .

Die Starter-Anwendung enthält bereits das Kern-Datenmodell, das Sie verwenden werden. product enthält Informationen zur Kreuzfahrt selbst, einschließlich der Liste der verfügbaren cabins. Verwenden Sie das booking-Objekt, um die Optionen zu speichern, die der Benutzer für die Reservierung auswählt. In der index.js-Datei sehen Sie das Setup.

Erstellen eines Formulars

Erstellen Sie das Formular, mit dem der Benutzer die Reservierung vornehmen wird:

  1. Öffnen Sie in Visual Studio Code die Datei index.html.

  2. Fügen Sie in der Zeile nach dem TODO: Add booking form-Kommentar den folgenden HTML-Code hinzu.

    <!-- TODO: Add booking form -->
<form v-show="!booking.completed">
    <h2>Book now!</h2>
    <div class="row">
        <label for="product-cabin">Select class:</label>
        <select id="product-cabin" v-model="booking.cabinIndex">
            <option v-for="(cabin, index) in product.cabins" :value="index">
                {{ cabin.name }} $ {{ cabin.price.toLocaleString('en-US') }}
            </option>
        </select>
    </div>
    <div class="row">
        <label for="notes">Notes:</label>
        <textarea v-model="booking.notes" rows="3"></textarea>
    </div>
    <div class="row">
        <!--TODO: Add button later -->


    </div>
</form>

Überblick über den Code

Sehen wir uns den HTML-Code an, den Sie zur Seite hinzugefügt haben.

Das Form-Element

<form v-show="!booking.completed">

Das form-Element ist ein normales HTML-Formular-Element. Das von Ihnen hinzugefügte Schlüsselattribut ist v-show. Mit diesem Attribut können Sie die Anzeige eines Elements in Vue.js umschalten. In diesem Entwurf möchten Sie das Element anzeigen, falls die Reservierung unvollständig ist. Wenn Sie v-show auf !booking.completed festlegen, geben Sie an, dass das Formular angezeigt wird, während die Buchung ! (nicht) completed ist.

Das Select-Element für Kabinen

<select id="product-cabin" v-model="booking.cabinIndex">
    <option v-for="(cabin, index) in product.cabins" :value="index">
        {{ cabin.name }} $ {{ cabin.price.toLocaleString('en-US') }}
    </option>
</select>

Die Liste der verfügbaren Kabinen wird mithilfe eines select-Elements angezeigt. Sie möchten hierbei den ausgewählten Wert, der als Index verwendet wird, an booking.cabinIndex binden.

Die Liste der verfügbaren Kabinen ist in product.cabins hinterlegt. Verwenden Sie also v-for, um die Liste der Optionen für die Dropdownliste zu erstellen. Setzen Sie value für jede Option auf den Wert index. Erstellen Sie dann eine Anzeige von name der Kabine und ihrer price.

Das Textbereich-Element für Notizen

<textarea v-model="booking.notes" rows="3"></textarea>

Binden Sie die booking.notes-Option an textarea. Legen Sie die Größe fest, indem Sie das rows-Attribut auf 3 setzen.

Der Todo-Kommentar

Beachten Sie die TODO-Erinnerung zum Hinzufügen einer Schaltfläche. Nachdem Sie später in diesem Modul gelernt haben, wie Sie Ereignishandler erstellen, werden Sie die Schaltfläche später hier platzieren.

Tipp

TODO-Kommentare sind eine gute Möglichkeit, Hinweise zu Aufgaben zu erstellen, die Sie noch ausführen müssen.

Testen der Ergebnisse

Sehen wir uns die aktualisierte Seite an!

  1. Speichern Sie alle Dateien, indem Sie Datei>Alle speichern auswählen.
  2. Drücken Sie Strg+Umschalt+P, um die Befehlspalette zu öffnen. Drücken Sie auf einem Mac Cmd+Umschalt+P.
  3. Stellen Sie sicher, dass Live Server ausgeführt wird, indem Sie Live Server eingeben und dann Live Server: Open with Live Server auswählen.
  4. Navigieren Sie in einem Browser zu http://localhost:5500.

Sie sehen nun, dass auf der Seite die folgende Abbildung angezeigt wird:

Screenshot des neu erstellten Formulars.

Damit haben Sie Vue-Daten an ein Formular gebunden.