6. project [vuejs-04]: richtlijnen [v-model, v-bind], berekende attributen, invoerformulier

De boomstructuur van het project [vuejs-04] is als volgt:

6.1. Het hoofdscript [main.js]

Dit is hetzelfde als in het vorige voorbeeld.

6.2. De hoofdcomponent [App]

De code van [App.vue] is als volgt:


<template>
  <b-container>
    <b-card>
      <!-- introductiebericht -->
      <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>

De component [App.vue] maakt gebruik van de nieuwe component [Form] (regels 12, 19, 24).

6.3. De component [Form]

De code van de component [Form] is als volgt:


<template>
  <div>
    <!-- formulier -->
    <b-form>
      <!-- formulierelementen -->
      <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>
            <!-- knop -->
            <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 {
    // naam
    name: "Form",
    // statische attributen van de component
    data() {
      return {
        // aantal onderliggende elementen
        enfants: ""
      };
    },

    // berekende attributen
    computed: {
      // attribuut [formInvalide]
      formInvalide() {
        return !this.enfantsValide;
      },
      // attribuut [enfantsInvalide]
      enfantsValide() {
        return Boolean(this.enfants.match(/^\s*\d+\s*$/));
      }
    },
    // methoden
    methods: {
      doSomething() {
        // het aantal kinderen is bekend op het moment van validatie
        alert("Nombre d'enfants : " + this.enfants);
      }
    }
  };
</script>

Weergave

Opmerkingen

regels 4-32: de tag <b-form> introduceert een Bootstrap-formulier;
regel 6: de tag <b-row> introduceert een rij in het formulier;
regel 7: de tag <b-col cols=’4’> introduceert een kolom die zich uitstrekt over 4 Bootstrap-kolommen;
regel 8: de tag <b-card> [6] introduceert een Bootstrap-kaart, een gebied dat door een rand wordt omkaderd;
regel 9: de tag <b-form-group> introduceert een groep onderling gekoppelde formulierelementen. Hier is een tekst (attribuut [label]) [1] gekoppeld aan een invoerveld (attribuut [label-for]). De waarde van [label-for] is de waarde van het veld [id], regel 12, van het invoerveld;
regels 10-14: de tag <b-input> [2] introduceert een invoerveld:
- regel 10: [type=’text’] geeft aan dat er tekst in het invoerveld kan worden getypt. We hadden [type=’number’] kunnen schrijven met de beperkingen [min=’val1’ max=’val2’ step=’val3’], aangezien er één kind wordt verwacht. We hebben [type=’text’] gebruikt om te laten zien hoe de geldigheid van een invoer kan worden gecontroleerd;
- regel 12: het attribuut [placeholder] [3] bepaalt de melding die in het invoerveld wordt weergegeven zolang de gebruiker nog niets heeft ingevoerd;
- regel 13: de richtlijn [v-model] koppelt de ingevoerde waarde in twee richtingen aan het attribuut [enfants], regel 42, van de component:
  - wanneer de ingevoerde waarde verandert, verandert ook de waarde van het attribuut [enfants];
  - wanneer de waarde van het attribuut [enfants] verandert, verandert ook de ingevoerde waarde, d.w.z. dat de inhoud van [2] verandert;
  - het is belangrijk om te begrijpen dat, dankzij het bovenstaande mechanisme, wanneer de gebruiker op de knop [Valider] [5] klikt, het attribuut [enfants] op regel 42 de waarde krijgt die is ingevoerd in [2];
- regel 14: de instructie [v-bind] legt een koppeling tot stand tussen enerzijds een attribuut van de <b-input>-tag, in dit geval het attribuut [state], en anderzijds een attribuut van de component, in dit geval [enfantsValide], regel 53. Het attribuut [enfantsValide] is bijzonder in die zin dat het een functie is die de waarde van het attribuut retourneert. Dit type attribuut wordt een berekend attribuut genoemd. De berekende attributen zijn te vinden in de eigenschap [computed], regel 47, van de component. Berekende attributen worden op dezelfde manier gebruikt als de statische attributen van de functie [data]: op regel 14 schrijft men niet [v-bind:state=’enfantsValide()’], maar [v-bind:state=’enfantsValide’], zonder de haakjes. Ook bij het lezen van [template] is het niet mogelijk om een berekend attribuut te onderscheiden van een statisch attribuut. Hiervoor moet de scriptcode van de component worden bekeken;
- regel 14: het attribuut [state] bepaalt de geldige/ongeldige status van de ingevoerde waarde: als [enfantsValide] de waarde [true] oplevert, wordt de ingevoerde waarde als geldig beschouwd, anders als ongeldig. De bovenstaande schermafbeelding toont de component [b-input] wanneer de functie [enfantsValide] de waarde [false] retourneert;
- regel 15: met de tag <b-form-invalid-feedback> [4] kan een melding worden weergegeven wanneer de invoer in [2] ongeldig is. Het attribuut [:state=’enfantsValide’] is identiek aan het attribuut [v-bind:state=’enfantsValide’] van regel 14. De richtlijn [v-bind] kan worden weggelaten, maar het teken [:] moet behouden blijven. De foutmelding verschijnt dus wanneer het attribuut [enfantsValide] de waarde [false] heeft;
- regel 16: einde van de elementengroep <b-group>;
- regel 18: de knop [5] waarmee de invoer kan worden bevestigd:
  - deze zal blauw zijn [variant=’primary’];
  - [:disabled="formInvalide"]: met het attribuut [disabled] kan de knop worden geactiveerd of gedeactiveerd. Dit attribuut is gekoppeld (v-bind) aan het berekende attribuut [formInvalide] op regel 49;
  - [@click="doSomething"]: wanneer de gebruiker op de knop klikt, wordt de methode [doSomething], regel 59, uitgevoerd;
- regels 19-22: de verschillende geopende tags worden gesloten;
- regels 23-29: een nieuwe regel in [template]. [class=’mt-3’] staat voor [margin (m) top (t) égale à 3 spacers]. [spacer] is een Bootstrap-afstandsmaat. Deze klasse genereert de spatiëring [8] in de bovenstaande schermafbeelding. Zonder deze klasse zit het gebied [7] tegen het gebied [1-6] aan;
- regel 24: een kolom die 4 Bootstrap-kolommen beslaat;
- regels 25-27: een melding [warning] die de waarde van het statische attribuut [enfants] (regel 42) weergeeft. Aangezien dit attribuut een bidirectionele koppeling heeft met het invoerveld, verandert de waarde die in de melding wordt weergegeven zodra de gebruiker het invoerveld wijzigt;
- regels 34-65: de code jS van de component;
- regel 42: het enige statische attribuut van de component;
- regels 47-56: de berekende attributen van de component;
- regels 53-55: de invoer wordt als geldig beschouwd als het een positief geheel getal is, eventueel voorafgegaan of gevolgd door ‘spaties’;
- regels 49-51: het formulier wordt als geldig beschouwd als de invoer van het aantal kinderen geldig is. Over het algemeen heeft een formulier meerdere invoervelden en wordt het als geldig beschouwd als deze allemaal geldig zijn;
- regels 58-63: de methoden van de component die reageren op de gebeurtenissen ervan. Hier is er slechts één gebeurtenis: de [click] op de knop. We geven alleen de ingevoerde waarde weer om aan te tonen dat we er daadwerkelijk toegang toe hebben;

6.4. Het project uitvoeren

We wijzigen het bestand [package.json] en voeren het project uit: