Form e input utente

I form sono un aspetto fondamentale di qualsiasi web app che si rispetti. Sono il componente principale tramite il quale i nostri utenti passano dati all'applicazione, e per questo motivo è fondamentale renderli il più possibile funzionali e di comodo utilizzo.

La principale direttiva che Vue ci offre per la gestione degli input lato utente è v-model. Questa direttiva permette di associare in maniera bidirezionale un modello dati ad un campo di una form:

<input type="text" v-model="myText"> {{ myText }}

Questo esempio, inserito correttamente in un contesto Vue, permette di avere il contenuto di myText, associato con il valore presente nel campo di testo.

La comodità della direttiva v-model sta nel fatto che essa è totalmente agnostica dalla tipologia di input utilizzata. Essa infatti funziona perfettamente e senza modifiche con campi di testo, textarea, checkbox, radio e select (sia singole che multiple), direttamente out-of-the-box. In questa guida non li affronteremo tutti, ma sulla guida ufficiale sono comunque disponibili esempi per ciascuna tipologia di campo. L'unica particolarità che è utile sottolineare è la possibilità, in caso di checkbox e radio, di modificare il valore ritornato rispetto a quello standard dei browser. Tramite le direttive v-bind:true-value, v-bind:false-value e v-bind:value sarà però possibile modificare questo valore. Guardiamo un esempio più complesso:

<div id="vue">
  <input type="radio" v-model="mese" v-bind:value="'marzo'"> Marzo
  <input type="radio" v-model="mese" v-bind:value="'aprile'"> Aprile
  <input type="radio" v-model="mese" v-bind:value="'maggio'"> Maggio
  <br/>
  <input type="checkbox" v-model="tv" v-bind:true-value="'si'" v-bind:false-value="'no'">tv
  <input type="checkbox" v-model="sauna" v-bind:true-value="'si'" v-bind:false-value="'no'">sauna
  <br/><br/>
  {{ mese }} - {{ tv }} - {{ sauna }}
</div>

new Vue({
  el: '#vue',
  data: {
    mese: 'marzo',
    tv: 'si',
    sauna: 'no'
  }
})

Abbiamo appena creato un piccolo form per la scelta di una vacanza. È possibile scegliere il mese (da un radio) e quali servizi avere tra TV e sauna. La situazione iniziale prevede che il mese scelto sia marzo e tra gli optional solamente la TV è selezionata. I valori di default sono stati sostituiti dal nome del mese nel caso del radio, e da un semplice si/no nel caso di checkbox. Grazie alle direttive esposte prima, possiamo definire quali valori associare anche ai valori di ritorno. Per fare qualche test, basta modificare il form e vedere gli aggiornamenti in tempo reale, stampando le variabili.

Modificatori

Come per gli eventi discussi in precedenza, anche la direttiva v-model prevede particolari modificatori, spesso molto comodi ed intuitivi. L'utilizzo è il medesimo degli eventi, per esempio v-model.lazy.trim="myModel". Vediamone alcuni in dettaglio:

• .lazy cambia la modalità di aggiornamento del valore javascript. Di default viene utilizzato l'evento input mentre se viene attivato il modificatore lazy viene utilizzato l'evento nativo change;
• .number converte automaticamente il valore a numero;
• .trim rimuove eventuali caratteri di spazio all'inizio e alla fine del valore inserito.

È bene utilizzare spesso questi filtri, soprattutto .trim e .number, in modo da evitare bug che potrebbero sorgere a fronte di una validazione dimenticata. .lazy, invece, è spesso utile quando è necessaria l'esecuzione di task lenti o onerosi, e si preferisce limitare l'interattività dell'applicazione onde evitare problemi di performance.