6. Projekt [vuejs-04]: Richtlinien [v-model, v-bind], berechnete Attribute, Eingabeformular

Die Projektstruktur von [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 von [App.vue] lautet wie folgt:

<template>
  <b-container>
    <b-card>
      <!-- Einführungsmeldung -->
      <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 Komponente [Form]

Der Code der Komponente [Form] lautet wie folgt:

<template>
  <div>
    <!-- Formular -->
    <b-form>
      <!-- Formularelemente -->
      <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>
            <!-- Schaltfläche -->
            <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>

<!-- Skript -->
<script>
  export default {
    // Name
    name: "Form",
    // statische Attribute der Komponente
    data() {
      return {
        // Anzahl der untergeordneten Elemente
        enfants: ""
      };
    },

    // berechnete Attribute
    computed: {
      // Attribut [formInvalide]
      formInvalide() {
        return !this.enfantsValide;
      },
      // Attribut [enfantsInvalide]
      enfantsValide() {
        return Boolean(this.enfants.match(/^\s*\d+\s*$/));
      }
    },
    // Methoden
    methods: {
      doSomething() {
        // Die Anzahl der Kinder ist zum Zeitpunkt der Validierung bekannt
        alert("Nombre d'enfants : " + this.enfants);
      }
    }
  };
</script>

Visuelle Darstellung

Anmerkungen

• Zeilen 4–32: Das Tag <b-form> fügt ein Bootstrap-Formular ein;
• Zeile 6: Das Tag <b-row> fügt eine Zeile in das Formular ein;
• Zeile 7: Das Tag <b-col cols=’4’> definiert eine Spalte, die sich über 4 Bootstrap-Spalten erstreckt;
• Zeile 8: Das Tag <b-card> [6] fügt eine Bootstrap-Karte ein, also einen durch einen Rahmen umrandeten Bereich;
• Zeile 9: Das Tag <b-form-group> fügt eine Gruppe miteinander verknüpfter Formularelemente ein. Hier ist ein Text (Attribut [label]) [1] mit einem Eingabefeld (Attribut [label-for]) verknüpft. Der Wert von [label-for] ist der Wert des Feldes [id], Zeile 12, des Eingabefelds;
• Zeilen 10–14: Das <b-input>-Tag [2] definiert ein Eingabefeld:
  • Zeile 10: [type=’text’] gibt an, dass in das Eingabefeld Text eingegeben werden kann. Man hätte [type=’number’] mit den Einschränkungen [min=’val1’ max=’val2’ step=’val3’] schreiben können, da eine bestimmte Anzahl von Nachfolgern erwartet wird. Wir haben [type=’text’] verwendet, um zu zeigen, wie die Gültigkeit einer Eingabe überprüft werden kann;
  • Zeile 12: Das Attribut [placeholder] [3] legt die Meldung fest, die im Eingabefeld angezeigt wird, solange der Benutzer noch nichts eingegeben hat;
  • Zeile 13: Die Anweisung [v-model] verknüpft den eingegebenen Wert bidirektional mit dem Attribut [enfants] (Zeile 42) der Komponente:
    • Wenn sich der eingegebene Wert ändert, ändert sich auch der Wert des Attributs [enfants];
    • Wenn sich der Wert des Attributs [enfants] ä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, wenn der Benutzer auf die Schaltfläche [Valider] [5] klickt, das Attribut [enfants] in Zeile 42 den in [2] eingegebenen Wert annimmt;
  • Zeile 14: Die Anweisung [v-bind] stellt eine Verknüpfung her zwischen einerseits einem Attribut des Tags <b-input>, hier dem Attribut [state], und andererseits einem Attribut der Komponente, hier [enfantsValide], Zeile 53. Das Attribut [enfantsValide] ist insofern besonders, als es sich um eine Funktion handelt, die den Wert des Attributs zurückgibt. Diese Art von Attribut wird als berechnetes Attribut bezeichnet. Die berechneten Attribute finden sich in der Eigenschaft [computed], Zeile 47, der Komponente. Berechnete Attribute werden genauso verwendet wie die statischen Attribute der Funktion [data]: In Zeile 14 schreibt man nicht [v-bind:state=’enfantsValide()’], sondern [v-bind:state=’enfantsValide’], ohne Klammern. Auch beim Lesen von „[template]“ lässt sich ein berechnetes Attribut nicht von einem statischen Attribut unterscheiden. Dazu muss man sich den Skriptcode der Komponente ansehen;
  • Zeile 14: Das Attribut [state] legt den Status „gültig“ oder „ungültig“ des eingegebenen Werts fest: Wenn [enfantsValide] den Wert [true] zurückgibt, gilt der eingegebene Wert als gültig, andernfalls als ungültig. Der obige Screenshot zeigt die Komponente [b-input], wenn die Funktion [enfantsValide] den Wert [false] zurückgibt;
  • Zeile 15: Das Tag <b-form-invalid-feedback> [4] ermöglicht die Anzeige einer Meldung, wenn die Eingabe in [2] ungültig ist. Sein Attribut [:state=’enfantsValide’] ist identisch mit dem Attribut [v-bind:state=’enfantsValide’] in Zeile 14. Die Anweisung [v-bind] kann weggelassen werden, das Zeichen [:] muss jedoch beibehalten werden. Die Fehlermeldung wird daher angezeigt, wenn das Attribut [enfantsValide] den Wert [false] hat;
  • Zeile 16: Ende der Elementgruppe <b-group>;
  • Zeile 18: Die Schaltfläche [5], mit der die Eingabe bestätigt wird:
    • sie wird blau sein: [variant=’primary’];
    • [:disabled="formInvalide"]: Das Attribut [disabled] dient dazu, die Schaltfläche zu aktivieren bzw. zu deaktivieren. Dieses Attribut ist (v-bind) mit dem berechneten Attribut [formInvalide] aus Zeile 49 verknüpft;
    • [@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 geöffneten Tags;
  • Zeilen 23–29: Eine neue Zeile in [template]. [class=’mt-3’] steht für [margin (m) top (t) égale à 3 spacers]. [spacer] ist ein Abstandsmaß von Bootstrap. Diese Klasse erzeugt den Abstand [8] im obigen Screenshot. Ohne diese Klasse liegt der Bereich [7] direkt an den Bereich [1-6] an;
  • Zeile 24: eine Spalte, die 4 Bootstrap-Spalten einnimmt;
  • Zeilen 25–27: eine Warnmeldung [warning], die den Wert des statischen Attributs [enfants] (Zeile 42) anzeigt. Da dieses Attribut eine bidirektionale Verknüpfung mit dem Eingabefeld hat, ändert sich der in der Meldung angezeigte Wert, sobald der Benutzer das Eingabefeld ändert;
  • Zeilen 34–65: der Code jS 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 gegebenenfalls „Leerzeichen“ vorangestellt oder nachgestellt sind;
  • Zeilen 49–51: Das Formular gilt als gültig, wenn die Eingabe der Anzahl der Kinder gültig ist. Im Allgemeinen enthält ein Formular mehrere Eingabefelder und gilt als gültig, wenn alle Eingaben gültig sind;
  • Zeilen 58–63: Die Methoden der Komponente, die auf deren Ereignisse reagieren. Hier gibt es nur ein Ereignis: das [click] auf der Schaltfläche. Wir beschränken uns darauf, den eingegebenen Wert anzuzeigen, um zu zeigen, dass wir tatsächlich Zugriff darauf haben;

6.4. Ausführung des Projekts

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