6. Projekt [vuejs-04]: Direktiven [v-model, v-bind], berechnete Eigenschaften, Eingabeformular

Die Verzeichnisstruktur des Projekts [vuejs-04] sieht wie folgt aus:

6.1. Das Hauptskript [main.js]

Es ist dasselbe wie im vorherigen Beispiel.

6.2. Die Hauptkomponente [App]

Der Code für [App.vue] lautet wie folgt:


<template>
  <b-container>
    <b-card>
      <!-- message de présentation -->
      <b-row>
        <b-col cols="8">
          <b-alert show variant="success" align="center">
            <h4>[vuejs-04] : directives [v-model, v-bind], attributs calculés, formulaire de saisie</h4>
          </b-alert>
        </b-col>
      </b-row>
      <Form />
    </b-card>
  </b-container>
</template>
 
 
<script>
  import Form from "./components/Form.vue";
 
  export default {
    name: "app",
    components: {
      Form
    }
  };
</script>

Die Komponente [App.vue] verwendet die neue Komponente [Form] (Zeilen 12, 19, 24).

6.3. Die [Form]-Komponente

Der Code für die [Form]-Komponente lautet wie folgt:


<template>
  <div>
    <!-- form -->
    <b-form>
      <!-- form elements -->
      <b-row>
        <b-col cols="4">
          <b-card bg-variant="light">
            <b-form-group label="Nombre d'enfants à charge" label-for="enfants">
              <b-input type="text"
                       id="enfants"
                       placeholder="Indiquez votre nombre d'enfants"
                       v-model="enfants"
                       v-bind:state="enfantsValide" />
              <b-form-invalid-feedback :state="enfantsValide">Vous devez saisir un nombre positif ou nul</b-form-invalid-feedback>
            </b-form-group>
            <!-- button -->
            <b-button variant="primary" :disabled="formInvalide" @click="doSomething">Valider</b-button>
          </b-card>
        </b-col>
      </b-row>
    </b-form>
    <b-row class="mt-3">
      <b-col cols="4">
        <b-alert show variant="warning" align="center">
          <h4>enfants= {{enfants}}</h4>
        </b-alert>
      </b-col>
    </b-row>
  </div>
</template>
 
<!-- script -->
<script>
  export default {
    // nom
    name: "Form",
    // attributs statiques du composant
    data() {
      return {
        // nbre d'enfants
        enfants: ""
      };
    },
 
    // attributs calculés
    computed: {
      // attribut [formInvalide]
      formInvalide() {
        return !this.enfantsValide;
      },
      // attribut [enfantsInvalide]
      enfantsValide() {
        return Boolean(this.enfants.match(/^\s*\d+\s*$/));
      }
    },
    // méthodes
    methods: {
      doSomething() {
        // le nbre d'enfants est connu lorsque la validation a lieu
        alert("Nombre d'enfants : " + this.enfants);
      }
    }
  };
</script>

Visuelle Ausgabe

Kommentare

Zeilen 4–32: Das <b-form>-Tag definiert ein Bootstrap-Formular;
Zeile 6: Das <b-row>-Tag definiert eine Zeile im Formular;
Zeile 7: Das <b-col cols=’4’>-Tag definiert eine Spalte, die sich über 4 Bootstrap-Spalten erstreckt;
Zeile 8: Das <b-card>-Tag [6] definiert eine Bootstrap-Karte, einen durch einen Rahmen umrandeten Bereich;
Zeile 9: Das <b-form-group>-Tag fügt eine Gruppe miteinander verknüpfter Formularelemente hinzu. Hier wird eine Beschriftung (das [label]-Attribut) [1] mit einem Eingabefeld (das [label-for]-Attribut) verknüpft. Der Wert von [label-for] ist der Wert des [id]-Feldes (Zeile 12) des Eingabefeldes;
Zeilen 10–14: Das <b-input>-Tag [2] führt ein Eingabefeld ein:
- Zeile 10: [type='text'] gibt an, dass Text in das Eingabefeld eingegeben werden kann. Wir hätten auch [type='number'] mit den Einschränkungen [min='val1' max='val2' step='val3'] schreiben können, da wir eine Reihe von untergeordneten Elementen erwarten. Wir haben [type='text'] verwendet, um zu demonstrieren, wie eine Eingabe validiert wird;
- Zeile 12: Das Attribut [placeholder] [3] legt die Meldung fest, die im Eingabefeld angezeigt wird, bis der Benutzer etwas eingibt;
- Zeile 13: Die [v-model]-Direktive bindet den eingegebenen Wert bidirektional an das [children]-Attribut (Zeile 42) der Komponente:
  - Wenn sich der eingegebene Wert ändert, ändert sich auch der Wert des Attributs [children];
  - wenn sich der Wert des Attributs [children] ändert, ändert sich auch der eingegebene Wert, d. h., der Inhalt von [2] ändert sich;
  - Wichtig zu verstehen ist, dass dank des oben beschriebenen Mechanismus das Attribut [children] in Zeile 42 den in [2] eingegebenen Wert annimmt, sobald der Benutzer auf die Schaltfläche [Validate] [5] klickt;
- Zeile 14: Die [v-bind]-Direktive stellt eine Bindung zwischen einem Attribut des <b-input>-Tags – in diesem Fall dem Attribut [state] – und einem Komponentenattribut – in diesem Fall [enfantsValide] in Zeile 53 – her. Das Attribut [enfantsValide] ist insofern einzigartig, als es sich um eine Funktion handelt, die den Wert des Attributs zurückgibt. Diese Art von Attribut wird als berechnetes Attribut bezeichnet. Berechnete Attribute finden sich in der Eigenschaft [computed] der Komponente in Zeile 47. Berechnete Attribute werden genauso verwendet wie statische Attribute der Eigenschaft [data]: In Zeile 14 schreiben wir nicht [v-bind:state=’enfantsValide()’], sondern [v-bind:state=’enfantsValide’], ohne Klammern. Daher ist es beim Lesen der [template] unmöglich, ein berechnetes Attribut von einem statischen Attribut zu unterscheiden. Dazu muss man den Skriptcode der Komponente untersuchen;
- Zeile 14: Das Attribut [state] legt den Status „gültig“ oder „ungültig“ des eingegebenen Werts fest: Wenn [enfantsValide] [true] zurückgibt, gilt der eingegebene Wert als gültig; andernfalls gilt er als ungültig. Der Screenshot oben zeigt die Komponente [b-input], wenn die Funktion [enfantsValide] [false] zurückgibt;
- Zeile 15: Das <b-form-invalid-feedback>-Tag [4] zeigt eine Meldung an, wenn die Eingabe in [2] ungültig ist. Sein Attribut [:state='childrenValid'] ist identisch mit dem Attribut [v-bind:state='childrenValid'] in Zeile 14. Die [v-bind]-Direktive kann weggelassen werden, das [:]-Symbol muss jedoch beibehalten werden. Die Fehlermeldung wird daher angezeigt, wenn das Attribut [childrenValid] den Wert [false] hat;
- Zeile 16: Ende der <b-group>-Elementgruppe;
- Zeile 18: die Schaltfläche [5], die die Eingabe validiert:
  - sie ist blau [variant='primary'];
  - [:disabled="formInvalide"]: Das Attribut [disabled] aktiviert oder deaktiviert die Schaltfläche. Dieses Attribut ist (v-bind) an das berechnete Attribut [formInvalide] in Zeile 49 gebunden;
  - [@click="doSomething"]: Wenn der Benutzer auf die Schaltfläche klickt, wird die Methode [doSomething] in Zeile 59 ausgeführt;
- Zeilen 19–22: Schließen der verschiedenen offenen Tags;
- Zeilen 23–29: eine neue Zeile in der [template]. [class=’mt-3’] bedeutet [Rand (m) oben (t) gleich 3 Spacer]. [spacer] ist eine Bootstrap-Abstands-Einheit. Diese Klasse erzeugt den Abstand [8] im obigen Screenshot. Ohne diese Klasse liegt Bereich [7] bündig mit den Bereichen [1–6];
- Zeile 24: eine Spalte, die sich über 4 Bootstrap-Spalten erstreckt;
- Zeilen 25–27: eine [warning]-Meldung, die den Wert des statischen Attributs [children] (Zeile 42) anzeigt. Da dieses Attribut eine bidirektionale Bindung mit dem Eingabefeld hat, ändert sich der in der Meldung angezeigte Wert, sobald der Benutzer es ändert;
- Zeilen 34–65: der JavaScript-Code der Komponente;
- Zeile 42: das einzige statische Attribut der Komponente;
- Zeilen 47–56: die berechneten Attribute der Komponente;
- Zeilen 53–55: Die Eingabe gilt als gültig, wenn es sich um eine positive ganze Zahl handelt, der optional Leerzeichen vorangestellt oder nachgestellt werden können;
- Zeilen 49–51: Das Formular gilt als gültig, wenn die Anzahl der eingegebenen Kinder gültig ist. Im Allgemeinen verfügt ein Formular über mehrere Felder und gilt als gültig, wenn alle Felder gültig sind;
- Zeilen 58–63: Die Methoden der Komponente, die auf ihre Ereignisse reagieren. Hier gibt es nur ein Ereignis: den [Klick] auf die Schaltfläche. Wir zeigen einfach den eingegebenen Wert an, um zu verdeutlichen, dass wir darauf zugreifen können;

6.4. Ausführen des Projekts

Wir ändern die Datei [package.json] und führen das Projekt aus: