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.