Riprendiamo le nostre guide Vue.js con lo studio di V-For. Cos’è la direttiva V-For? Andiamo a vedere tutto nel modo più approfondito possibile. 

Direttiva V-For con Vue.js

La direttiva V-For ci serve per ciclare un array e un oggetto. Questo ci consente di stampare ciò che vogliamo n volte in base ai valori che contiene il nostro array o oggetto. Andiamo a modificare il nostro codice proprio in questo modo:

data: {
title: ‘Hello World!’,
numberList: [],
number: undefined
},

addNumber: function(){
if(this.number){
this.numberList.push(this.number);
}
},

Abbiamo aggiunto due variabili nei dati a disposizione della nostra istanza che sono numberList: il nostro array che scorreremo, e number che è il numero che andremo ad aggiungere alla lista tramite un input.

A questo punto prepariamo in methods anche la funzione che si dovrà richiamare ad ogni salvataggio.

La funzione salverà il numero solo se c’è e se è diverso da 0.

Ora dobbiamo preparare il nostro html. Dovremo disegnare l’input per inserire il numero e stampare la lista quindi useremo il V-For:

<h1>Operazioni sui seguenti numeri</h1>
<div>
<ul>
<li v-for=”n in numberList”>
{{n}}
</li>
</ul>
</div>
<div>
<h3>Aggiungi un numero</h3>
<input type=”number” v-model=”number” @keyup.enter=”addNumber”>
</div>

Abbiamo creato un two binding con il numero da aggiungere: una volta aggiunto l’evento alla pressione del tasto invio, sopra verrà stampata la nostra lista di numeri.

NumberList è la nostra lista di numeri, n è il numero che stiamo scorrendo dalla lista.

Funziona tutto anche se non è molto “comoda come soluzione” proprio perché dopo l’invio dobbiamo  andare a cancellare il numero precedentemente inserito.  Questo sappiamo già farlo e non è per nulla complicato. Dopo aver aggiunto il numero all’array dobbiamo andare a svuotare il nostro input.

C’è un two binding quindi possiamo farlo direttamente da Javascript andando solamente a riportare number ad undefined.

addNumber: function(){
if(this.number){
this.numberList.push(this.number);
this.number = undefined;
}
},

LaraMind e Vue.js

LaraMind è la prima scuola in Italia che si è occupata di Vue.js con serietà e professionalità: corsi a catalogo Vue.js e Laravel + Vue.js oltre che tante soluzioni custom di tutti i tipi.