Creiamo una app con Vue ed Electron -Parte 2
Creando un InputComponent custom, esploriamo: props, $emit e Computed.
Eccoci al nostro secondo appuntamento, nel precedente Articolo abbiamo esplorato il concept e gli schemi di partenza, abbiamo avviato un progetto Vue Cli (stiamo lavorando con Vue 2) e abbiamo creato lo scaffolding di base.
2 Impostiamo le pagine e il layout di default
È sempre importante testare con dati molto semplici il nostro lavoro, quindi prepariamo il file App.vue in modo che carichi le rotte con dei link temporanei per accertarci del loro corretto funzionamento.
2.1 Impostiamo il Layout di Default con gli slot necessari
Partendo da questo schema
Creiamo il nostro template base
Cosa sono gli slot?
In poche parole sono dei segnaposto che possiamo popolare direttamente dal genitore del componente, senza dover passare per le props.
Gli slot possono contenere anche html e proprietà del data del genitore, ma non possono accedere ai data del componente stesso.
2.2 Impostiamo le pagine per usare il layout
In Home.vue usiamo solo lo slot main
In Palettes.vue e Palette.vue usiamo tutti e due gli slot
Ottimo! Abbiamo ora la nostra base, possiamo passare a creare i singoli componenti che riutilizzeremo nelle pagine.
Ovviamente questo lavoro è a puro scopo didattico, nella realtà esistono diversi strumenti chiavi in mano che potremmo utilizzare per creare dei form e validarli, come ad esempio
https://formvuelate.js.org/
https://vuelidate.js.org/
3.1 Form
3.1.1 InputComponent
Questo componente è una versione custom di un input
A cosa serve?
Vogliamo creare un input riutilizzabile con alcune caratteristiche standard. Nello specifico ci interessa impostare a monte il tipo di input, se è di tipo number i valori min e max accettati, il placeholder e così via.
Creiamo quindi delle props usando la sintassi object che ci consente di stabilire anche le caratteristiche previste per quella prop.
Cosa sono le props?
Le props ci consentono di passare dati dal componente genitore a quello figlio. In pratica costituiscono parte delle proprietà che generalmente inseriremmo in data.
Props are custom attributes you can register on a component. When a value is passed to a prop attribute, it becomes a property on that component instance.
Impostiamo il template passando le props tramite degli attributi dinamici.
Riconosciamo gli attributi dinamici dai :
Per poter utilizzare il valore dell’input inserito dall’utente dobbiamo a questo punto farlo ritornare al componente genitore.
Come possiamo fare?
Esistono vari modi per condividere dati tra componenti, quello basilare è l’emit di un evento.
Cosa fa un emit?
Invia un evento anche personalizzato, in questo caso input, che possiamo intecettare nel componente genitore tramite la direttiva v-on:nomeEvento=”$event”
$event ci consente di intercettare il valore che abbiamo inviato con il nostro $emit
3.1.2 Inseriamo InputComponent in Home
Nel nostro caso utilizzeremo direttamente il v-model per rimanere in ascolto dei cambiamenti inviati da InputComponent.vue.
Questa tecnica è descritta nella documentazione
Proviamo il tutto con dei dati fake!
Per testare il funzionamento del componente aggiungiamo in Home.vue il data degree.
Ok, siamo pronti per gestire eventuali errori nel nostro componente!
Per poter gestire l’errore creiamo in InputComponent-vue una computed per controllare che il value sia corretto.
La validazione in sé la gestiamo nella Home.vue inserendo anche qui una computed degree e cancelliamo degree dai data.
Cosa è una computed property?
Quando abbiamo necessità di modificare i dati che andranno nel template con delle logiche più o meno complesse, conviene utilizzare una computed property.
Si comporta apparentemente come un methods, è infatti una funzione che prende un valore e lo restituisce modificato.
A differenza di un method però una computed conserva in cache il suo risultato e lo modifica solo nel momento in cui il valore del quale è in ascolto viene effettivamente modificato.
Un computed può avere due sintassi
1. La prima e più utilizzata si presenta proprio come un method.
Questo tipo di computed non può modificare direttamente dei valori, può solo effettuare delle manipolazioni di dati e poi restituire un risultato.
2. La seconda sintassi prevede invece un getter e un setter
In questo caso possiamo anche modificare direttamente le proprietà del data.
Abbiamo messo tanta carne a cuocere quindi per ora ci fermiamo qui!
Nel prossimo articolo vedremo come spostare la validazione in un mixin e creeremo un form dinamico.
