Hinzufügen von Eigenschaften zu einer Komponente

6 Minuten

Lassen Sie uns nun mit dem Erstellen unserer Anwendung fortfahren, indem wir eine Komponente erstellen, um die aktuelle Liste der Buchungen anzuzeigen. Sie fügen nun ein Formular hinzu, mit dem der Benutzer Buchungen vornehmen kann. Erstellen Sie daher zunächst ein statisches Array.

Erstellen der Komponente

Beginnen Sie mit dem Erstellen der Komponente.

Erstellen Sie in Visual Studio Code eine Datei namens BookingList.vue unter src/components.
Geben Sie in der BookingList.vue nun vue ein, und wählen Sie dann <vue> with default.vue im Ausschnittmenü aus.

Der Codeausschnitt erstellt die Standardstruktur.

Registrieren der Eigenschaften und des berechneten Werts

Wir erwarten ein Array von Informationen zu Buchungen, daher deklarieren wir unsere Eigenschaft als Typ Array. Da Sie eine Komponente erstellen, können Sie auch berechnete Eigenschaften nutzen, um Werte automatisch zu berechnen. Fügen Sie eine berechnete Eigenschaft hinzu, um den Gesamtpreis hinzuzufügen, und geben Sie einen Anzeigewert zurück, den Sie verwenden können.

Öffnen Sie src/components/BookingList.vue, falls es noch nicht geöffnet ist.
Fügen Sie innerhalb der geschweiften Klammern ({ }) für export default den folgenden Code hinzu, um eine Eigenschaft namens bookings und die computed-Eigenschaft zu erstellen:
```
props: {
    bookings: Array
},
computed: {
    totalDisplay() {
        let totalCost = 0;
        if (this.bookings && this.bookings.length > 0) {
            totalCost = 
                this.bookings.map(b => b.price)
                            .reduce((a, b) => a + b);
        }
        return '$ ' + totalCost.toLocaleString('en-US');
    }
}
```
Beachten Sie, wie totalDisplay mithilfe von this auf die bookings-Eigenschaft zugreifen kann. So können wir auf Daten oder andere Eigenschaften zugreifen, die als Teil unserer Komponente deklariert wurden. Wir erstellen den Code, um die Gesamtsumme aller in bookings aufgelisteten Preise zu berechnen und eine Zeichenfolgen-Anzeige zu erstellen.

Hinzufügen der Vorlage zur Anzeige

Fügen wir nun die Vorlage hinzu, um die Informationen für unsere Buchungen anzuzeigen. Verwenden Sie v-for, um alle Buchungen und die berechnete Eigenschaft totalDisplay, die wir zuvor erstellt haben, zu durchlaufen.

Öffnen Sie die src/components/BookingList.vue, falls sie noch nicht geöffnet ist.

Fügen Sie im <template>-Element folgenden HTML-Code hinzu:

<section>
<h2>
    Here's your current bookings:
</h2>

<div class="row" v-for="(booking, index) in bookings" :key="index">
    <div>{{ booking.name }} </div>
</div>

<h3 class="row">
    Total: {{ totalDisplay }}
</h3>
</section>

Der Code durchläuft alle Buchungen mit v-for und zeigt cabin an. Anschließend wird totalDisplay aufgerufen, um die Gesamtkosten aller Buchungen anzuzeigen.

Hinzufügen der Komponente zur Hauptseite

Verwenden wir nun die von uns erstellte Komponente und übergeben Sie eine Liste mit Buchungen.

Öffnen Sie src/components/Host.vue.
Fügen Sie unterhalb des öffnenden <script>-Tags und vor export default eine neue Zeile hinzu.
Fügen Sie den folgenden Code (einschließlich des Kommentars) hinzu, um die BookingList-Komponente zu importieren:
```
import BookingList from './BookingList.vue';
// TODO: Register next component
```
Registrieren Sie die Komponente, indem Sie den folgenden Code (einschließlich des Kommentars) unterhalb des TODO: Add components-Kommentars hinzufügen:
```
components: {
    BookingList,
    // TODO: Add next component

},
```
Wichtig

Die beiden Kommas sind erforderlich, da wir später weitere Werte hinzufügen werden.

Verwenden der Komponente

Wenn die Komponente registriert ist, rufen wir sie auf unserer Seite auf. Wir verwenden das zuvor erstellte bookings-Array, um die Liste der Buchungen auf der Seite zu erstellen.

Öffnen Sie die src/components/Host.vue, falls sie noch nicht geöffnet ist.
Fügen Sie unter dem TODO: Add booking-list-Kommentar den folgenden Code hinzu, um die booking-list-Komponente zu verwenden:
```
<booking-list :bookings="bookings"></booking-list>
```

Testen der Seite

Nachdem wir die Komponente registriert und konfiguriert haben, testen wir die Seite!

Speichern Sie alle Dateien, indem Sie Datei>Alle speichern auswählen.
Kehren Sie über http://localhost:8080 zum Browser zurück und aktualisieren Sie die Seite.

Die Seite zeigt nun die Beispiel-Buchung an.

Glückwunsch! Sie haben eine Komponente mit Eigenschaften erstellt.