Creiamo una app con Vue ed Electron -Parte 3
Generiamo il form dinamicamente.
Esploriamo: mixins, modificatore .sync e validazione.
Eccoci al nostro terzo appuntamento! Nel precedente Articolo abbiamo creato un InputComponent custom utilizzando: props, $emit e Computed.
Spostiamo la validazione in un mixin
Cosa sono i mixins?
In Vue 2 i mixins sono stati pensati per poter condividere “pezzi di codice” tra un componente e l’altro, evitando quindi di dover riscrivere data, metodi, hooks…
Un mixin può contenere qualunque option presente in un componente.
Nella versione 3 di Vue, i mixins sono strati deprecati in quanto è stata creata una strategia generale, la Composition Api, pensata proprio per risolvere i problemi di condivisione tra i componenti.
Creiamo il file Utilities.js che conterrà le regole di validazione.
Importiamo a questo punto Utilities in Home utilizzando la proprietà mixins che accetta come valore un array.
A questo punto possiamo usare la nosta funzione isInRange come se fosse un metodo del componente.
Perfetto! Ora usiamo più input assieme.
Creiamo il Componente Form!
Funziona tutto, ma ora creiamo un componente Form riutilizzabile, lo scopo è gestire il numero di input in maniera centralizzata.
Spostiamo prima i nostri dati in un componente FormComponent
Modifichiamo Home
Funziona tutto come prima, ma non abbiamo ottenuto ancora nessun vantaggio!
Invece di scrivere a mano gli input che ci servono, potremmo spostare tutti i dati in un object form e poi ciclare su questi con un v-for.
Modifichiamo i componenti
FormComponent
Abbiamo spostato tutti i dati degli input in un Object in data, come potete notare abbiamo anche aggiunto una parte dedicata alla validazione.
Ma vediamo un passo alla volta.
Nel template usiamo il v-for e prepariamoci ad sincronizzare sia il value che l’error con degli $emit
Utilizziamo il modificatore .sync che servirà per avere una legame a due vie.
Da una parte invieremo al nostro componente figlio un valore con
v-bind:myPropName=”myPropName”
Nel componente figlio utilizziamo
update:myPropName
per inviare le modifiche.
Infine nel genitore invece intercettiamo i cambiamenti con
v-on:update:myPropName=”myPropName = $event”
FormComponent
InputComponent
Qui è tutto identico se non per l’evento input, useremo infatti al posto delle computed dei metodi che ci consentiranno di inviare l’emit con i dati modificati.
Modifichiamo anche il file Utilities.js
In questo file abbiamo una serie di tipi di validazioni da utilizzare, che richiamiamo all’interno del InputComponent.
Il componente quindi non contiene il tipo la validazione in quanto potremmo avere vari tipi di input, ma utilizza il mixin basandosi sull’object di configurazione inviato dal FormComponent, possiamo quindi aggiungere altri tipi di validazione in un unico file dedicato.
Andrà poi aggiunto un check sul fatto che siano stati inviati il numero e il tipo giusto di dato.
Per ora ci fermiamo qui…
Nel prossimo articolo installeremo Vuex e utilizzeremo una unica fonte di dati: lo Store.
