Arbeiten mit Formularen

• 5 Minuten

Die von der data() Funktion in einer Vue-App oder -Komponente zurückgegebenen Daten werden generisch als Zustand bezeichnet. Zustände sind alle Informationen, die Ihre Anwendung verfolgen muss, um die erforderlichen Vorgänge auszuführen. Benutzer ändern Zustände in der Regel über HTML-Formulare. Vue.js ermöglicht es Ihnen, Daten an ein Formular zu binden, sodass Benutzer Zustände aktualisieren können.

v-model

Die v-model-Anweisung erstellt eine bidirektionale Bindung zwischen einem HTML-Steuerelement und den zugehörigen Daten. Wenn der Wert also im Formular aktualisiert wird, wird er im Zustand Ihrer Anwendung aktualisiert. Die v-model-Anweisung unterstützt die Bindung an ein beliebiges Formular-Steuerelement, einschließlich Kontrollkästchen, Textfelder und Dropdownlisten.

Für alle Beispiele in dieser Einheit verwenden Sie die folgende Vue-Anwendung.

Vue.createApp({
    data() {
        return {
            name: 'Cheryl',
            status: -1,
            active: true,
            benefitsSelected: 'yes',
            statusList: [
                'full-time',
                'part-time',
                'contractor'
            ]
        }
    }
})

Binden an Textfelder

Zum Binden an ein Textfeld verwenden Sie die v-model-Anweisung.

<input type="text" v-model="name" />

Die name-Eigenschaft wird aktualisiert, wenn sich der Textfeld-Wert ändert. Wenn Sie stattdessen textarea verwenden möchten, ist die Syntax identisch. Verwenden Sie v-model="name" wie zuvor.

Binden an Kontrollkästchen

Normalerweise werden boolesche Werte an Kontrollkästchen gebunden. Mithilfe von Kontrollkästchen kann die entsprechende Option ein- und ausgeschaltet werden. Zum Binden der active-Option können Sie v-model wie zuvor verwenden.

<input type="checkbox" v-model="active" /> Is active

Gelegentlich verwendet ein Schalter keinen booleschen Wert. Stattdessen haben Sie möglicherweise zwei Auswahlmöglichkeiten, z. B. Ja und Nein. In diesem Fall können Sie true-value und false-value verwenden, um den zugeordneten Wert für das Kontrollkästchen anzugeben, das ausgewählt (true) oder nicht ausgewählt (false) ist.

<input type="checkbox" v-model="benefitsSelected" true-value="yes" false-value="no"> Benefits selected: {{ benefitsSelected }}

Dropdownlisten

In HTML-Code erstellen Sie Dropdownlisten in zwei Schritten. Sie verwenden select zum Erstellen der Liste und option zum Hinzufügen von Optionen. Der select-Tag speichert den ausgewählten Wert der Dropdownliste, sodass Sie ihn zum Binden an Ihr Modell verwenden können.

In Vue müssen Sie dazu die folgenden Schritte ausführen:

• Erstellen einer Liste mit Optionen. Verwenden Sie zum Erstellen der Liste der option-Elemente die Option v-for zum Durchlaufen und Erstellen eines Optionselements für jedes Element im Array.

• Kennzeichnen des Wertes. Sie müssen für jede von Ihnen erstellte Option einen Wert angeben. Wenn die Liste nur ein Array aus Zeichenfolgen darstellt, sollten Sie z. B. entweder die Zeichenfolge oder den ausgewählten Index als Wert speichern. Hier sehen Sie ein Beispiel:

  <select v-model="selectedIndex">
     <option v-for="(stringItem, index) in arrayOfStrings" :value="index"> 
     {{}}
     </option>
  </select>
  

  Wenn in Ihrer Liste ein Array aus Objekten gespeichert ist, verweisen Sie auf die Anzeigeeigenschaft und auf den Ort des Wertes.

  <select v-model="selectedValue">
     <option v-for="item in items" :value="item.value">
     {{ item.displayProperty }}
     </option>
  </select>  
  

• Verfolgen Sie den ausgewählten Wert. Mithilfe von select können Sie den ausgewählten Wert an den v-model-Tag binden. Hier können Sie entweder den Index oder den Wert des Elements verfolgen. Die Entscheidung liegt bei Ihnen.

Um die Liste der Optionen zu erstellen, verwenden Sie v-for, um die Liste zu durchlaufen. Legen Sie dann fest, dass der Wert als Index des Elements im Array festgelegt wird. Verwenden Sie v-for(status, index) in statusList, um den Index für jedes Element festzulegen. Legen Sie anschließend :value für jede Option auf index fest und zeigen Sie status als Option für den Benutzer an.

<select v-model="statusIndex">
    <!-- Create a message to select one -->
    <option disabled value="">Please select one</option>
    <!-- Use v-for to create the list of options -->
    <option v-for="(status, index) in statusList" :value="index">
        {{ status }}
    </option>
</select>

Fügen Sie schließlich v-model="statusIndex" hinzu. um sicherzustellen, dass der Wert der statusIndex-Dateneigenschaft auf den ausgewählten Index aktualisiert wird, wenn ein Benutzer ein Element auswählt.