Übung – Hinzufügen von Ereignishandlern

• 4 Minuten

Aktualisieren Sie nun Ihre Anwendung, um einen Ereignishandler für eine neu erstellte Schaltfläche auf dem Formular hinzuzufügen. Die Schaltfläche schaltet das booking.completed-Flag um, um so die Anzeige zu aktualisieren.

Hinzufügen der Funktion

Beginnen Sie mit dem Hinzufügen zur Vue-Anwendung:

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

2. Fügen Sie in der Zeile nach dem Kommentar TODO: Add methods den folgenden Code hinzu, um die bookCabin-Funktion zu erstellen. Diese Funktion ist der Ereignishandler.

   // TODO: Add methods
   methods: {
       bookCabin() {
           this.booking.completed = true;
       }
   }
   

   Beachten Sie, dass this an die aktuelle Anwendung gebunden ist. Dies ermöglicht den Zugriff auf das booking-Objekt über die Daten.

Hinzufügen der Schaltfläche zum Formular

Fügen Sie nun die Schaltfläche zum Formular hinzu:

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

2. Fügen Sie unter dem Kommentar TODO: Add button later den folgenden HTML-Code hinzu, um die Schaltfläche zu erstellen.

   <!--TODO: Add button later -->
   <button class="button" type="button" @click="bookCabin">Book now!</button>
   

   Beachten Sie, dass @click das Attribut an die bookCabin-Funktion gebunden ist, die Sie zuvor erstellt haben.

Testen der Seite

Nun können Sie Ihre aktualisierte Seite testen!

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. Öffnen Sie einen Browser, und wechseln Sie zu http://localhost:5500. Die Seite zeigt jetzt eine Schaltfläche an.
5. Füllen Sie das Formular aus und wählen Sie die Erstellen-Schaltfläche. Sie sehen nun, dass das Formular auf der Seite verschwindet.

Damit haben Sie einen Ereignishandler in Vue konfiguriert.