ATTENZIONE!

Questo articolo è stato scritto due anni fa. Oggi uso tutti i giorni vue e rails senza problemi particolari. In particolare trovo vue particolarmente utile e (relativamente) semplice ogni giorno di più. Le difficoltà che sono state spiegate nell’articolo ora sono state superate. Consiglio quindi vue a chi deve integrare con una UI moderna un’applicazione Rails. Ovviamente la curva di apprendimento non è lineare e soprattutto se si arriva dal JS di vecchia scuola bisognerà mettere da parte diversi vecchi pattern. Buono studio e buon apprendimento a tutti. Desidero lasciare comunque presente questo articolo perché evidenzia anche un perorso di crescita e credo possa essere comunque utili per chi per la prima volta si cimenta con Vue.js arrivando dal mio stesso punto di partenza.

Primi approcci con Vue.js

Nella board di momento.cc (una applicazione Rails) ho bisogno di aggiungere elementi interattivi e dinamici avanzati. Per questo motivo ho deciso di fare delle sperimentazione con la libreria javascript Vue.js.

Tra i problemi che ho incontrato nel mio primo approccio ho incontrato i seguenti problemi:

  1. aver pensato in modo aderente alla filosofia di React
  2. una solo parziale chiarezza su quale sia il significato della direttiva v-model
  3. tag select e ottenere i nomi dai progetti
  4. la necessità di creare una copia di un oggetto in javascript

1. Aver pensato in modo aderente alla filosofia di React

Pensare i componenti di Vue allo stesso modo dei componenti React è un errore. Questa libreria Javascript, diversamente da React, non ama i componenti piccoli o annidati. Per il rapporto tra eventi e componenti è meglio tenere “vicino” il componente che scatena l’evento e l’evento che ne subisce le conseguenze. Nel mio caso iniziale basta una struttura semplice.

2. Scarsa chiarezza sulla direttiva v-model

La direttiva v-model è sintassi zuccherata per l’aggiornamento dei dati sulla base dell’input dell’utente.

3. Il tag <select>

Ho una certa difficoltà ad estrarre i dati dei progetti sulla base del tag select.

Dopo una lunga elaborazione sono arrivato a questa soluzione:

<select type="text" class="form-control" v-model="momento.project" name="project_id">
  <option v-for="project in projects"
          v-bind:value="{name: project.name, id: project.id}"
          v-text="project.name">
  </option>
</select>

Con questa soluzione l’utente, quando seleziona una delle voci all’interno del menu a tendina, cambia i valori data dal componente Vue.

4. La necessità di creare una copia di un oggetto in javascript

Quando veniva aggiunto una voce alla lista, la voce rimaneva ancorata al form. Per slegare le due fasi ho dovuto inserire il seguente codice:

let copy = {...new_momento}
this.momentos_list.push(copy)

Vi sono, all’interno di questa porzione di javascript, delle cose che mi sono particolarmente oscure e poco chiare. La clonazione dell’oggetto avviene tramite nuove funzionalità fornite da javascript in edizione ES6. La mia conoscenza del javascript moderno ha grosse lacune. Questa è stata sicuramente una occasione per imparare il modo di copiare un oggetto impedendo a impedire il passaggio per referenza.