6. progetto [vuejs-04]: direttive [v-model, v-bind], proprietà calcolate, modulo di input

La struttura delle directory del progetto [vuejs-04] è la seguente:

6.1. Lo script principale [main.js]

È lo stesso dell'esempio precedente.

6.2. Il componente principale [App]

Il codice per [App.vue] è il seguente:


<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>

Il componente [App.vue] utilizza il nuovo componente [Form] (righe 12, 19, 24).

6.3. Il componente [Form]

Il codice del componente [Form] è il seguente:


<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>

Risultato visivo

Commenti

righe 4–32: il tag <b-form> introduce un modulo Bootstrap;
riga 6: il tag <b-row> introduce una riga nel modulo;
riga 7: il tag <b-col cols=’4’> introduce una colonna che occupa 4 colonne Bootstrap;
riga 8: il tag <b-card> [6] introduce una scheda Bootstrap, un'area incorniciata da un bordo;
riga 9: il tag <b-form-group> aggiunge un gruppo di elementi del modulo collegati tra loro. Qui, un'etichetta (l'attributo [label]) [1] è collegata a un campo di immissione (l'attributo [label-for]). Il valore di [label-for] è il valore del campo [id] (riga 12) del campo di immissione;
righe 10–14: il tag <b-input> [2] introduce un campo di immissione:
- riga 10: [type='text'] indica che è possibile digitare del testo nel campo di immissione. Avremmo potuto scrivere [type='number'] con i vincoli [min='val1' max='val2' step='val3'], poiché ci aspettiamo un numero di figli. Abbiamo utilizzato [type='text'] per dimostrare come convalidare un'immissione;
- riga 12: l'attributo [placeholder] [3] imposta il messaggio visualizzato nel campo di immissione finché l'utente non inserisce qualcosa;
- riga 13: la direttiva [v-model] associa in modo bidirezionale il valore inserito all'attributo [children], riga 42, del componente:
  - quando il valore inserito cambia, cambia anche il valore dell'attributo [children];
  - quando il valore dell'attributo [children] cambia, cambia anche il valore inserito, ovvero cambia il contenuto di [2];
  - Il punto importante da comprendere è che, grazie al meccanismo sopra descritto, quando l'utente clicca sul pulsante [Convalida] [5], l'attributo [children] alla riga 42 assume il valore inserito in [2];
- Riga 14: La direttiva [v-bind] stabilisce un binding tra un attributo del tag <b-input> — in questo caso, l’attributo [state] — e un attributo del componente — in questo caso, [enfantsValide] alla riga 53. L’attributo [enfantsValide] è unico in quanto è una funzione che restituisce il valore dell’attributo. Questo tipo di attributo è chiamato attributo calcolato. Gli attributi calcolati si trovano nella proprietà [computed], riga 47, del componente. Gli attributi calcolati vengono utilizzati allo stesso modo degli attributi statici della proprietà [data]: alla riga 14, non scriviamo [v-bind:state=’enfantsValide()’] ma [v-bind:state=’enfantsValide’], senza le parentesi. Pertanto, leggendo il [template], è impossibile distinguere un attributo calcolato da un attributo statico. Per farlo, è necessario esaminare il codice dello script del componente;
- Riga 14: L'attributo [state] imposta lo stato valido/non valido del valore inserito: se [enfantsValide] restituisce [true], il valore inserito è considerato valido; altrimenti, è considerato non valido. Lo screenshot sopra mostra il componente [b-input] quando la funzione [enfantsValide] restituisce [false];
- Riga 15: Il tag <b-form-invalid-feedback> [4] visualizza un messaggio quando l'input in [2] non è valido. Il suo attributo [:state='childrenValid'] è identico all'attributo [v-bind:state='childrenValid'] nella riga 14. La direttiva [v-bind] può essere omessa, ma il simbolo [:] deve essere mantenuto. Il messaggio di errore viene quindi visualizzato quando l'attributo [childrenValid] è [false];
- riga 16: fine del gruppo di elementi <b-group>;
- riga 18: il pulsante [5] che convaliderà l'input:
  - sarà blu [variant='primary'];
  - [:disabled="formInvalide"]: l'attributo [disabled] abilita o disabilita il pulsante. Questo attributo è associato (v-bind) all'attributo calcolato [formInvalide] alla riga 49;
  - [@click="doSomething"]: quando l'utente clicca sul pulsante, verrà eseguito il metodo [doSomething] alla riga 59;
- righe 19–22: chiusura dei vari tag aperti;
- righe 23–29: una nuova riga nel [template]. [class=’mt-3’] significa [margine (m) superiore (t) pari a 3 spaziatori]. [spacer] è un'unità di spaziatura di Bootstrap. Questa classe crea la spaziatura [8] nella schermata sopra. Senza questa classe, l'area [7] è a filo con le aree [1-6];
- riga 24: una colonna che si estende su 4 colonne Bootstrap;
- righe 25–27: un avviso [warning] che mostra il valore dell'attributo statico [children] (riga 42). Poiché questo attributo ha un binding bidirezionale con il campo di input, non appena l'utente lo modifica, cambia anche il valore visualizzato nell'avviso;
- righe 34–65: il codice JavaScript del componente;
- riga 42: l'unico attributo statico del componente;
- righe 47–56: gli attributi calcolati del componente;
- righe 53–55: l'input è considerato valido se è un numero intero positivo, facoltativamente preceduto o seguito da spazi;
- righe 49–51: il modulo è considerato valido se il numero di figli inserito è valido. Generalmente, un modulo ha più campi ed è considerato valido se tutti i campi sono validi;
- righe 58–63: i metodi del componente che rispondono ai suoi eventi. In questo caso, c'è un solo evento: il [clic] sul pulsante. Ci limitiamo a visualizzare il valore inserito per dimostrare che possiamo accedervi;

6.4. Esecuzione del progetto

Modifichiamo il file [package.json] ed eseguiamo il progetto: