Direttiva v-for in Vue.js

La direttiva v-for in Vue.js è una delle direttive più utilizzate in Vue.js ed è usata per iterare su un array o su un oggetto e renderizzare dinamicamente gli elementi nel DOM.

Ecco la sintassi di base:

<div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

La direttiva v-for in Vue.js si utilizza nella forma “item in items“, dove items è l’array o l’oggetto da iterare e item è il nome della variabile che rappresenta ciascun elemento nell’iterazione.

Possiamo usare un attributo speciale in Vue.js che è :key il quale serve ad aiutare Vue.js a tracciare gli elementi iterati. Ogni elemento iterato deve avere infatti una chiave unica per garantire un efficiente aggiornamento del DOM. Infatti, quando Vue aggiorna il DOM per riflettere i cambiamenti nella lista iterata, utilizza le chiavi fornite tramite :key per determinare quali elementi sono stati aggiunti, rimossi o riordinati. Questo aiuta Vue a evitare la ri-renderizzazione completa degli elementi quando la lista cambia, migliorando le prestazioni dell’applicazione.

In generale possiamo dire che è buona pratica assegnare una chiave univoca a ciascun elemento iterato, in particolare se gli elementi possono essere aggiunti, rimossi o riordinati nella lista. La chiave dovrebbe essere un identificatore unico per ogni elemento, come ad esempio un ID o un indice dell’array.

Esempio d’uso della direttiva v-for in Vue.js

In questo esempio quando il componente “ListaFrutti” viene montato, visualizzerà una lista di frutti, ciascuno rappresentato da un elemento <li> all’interno dell’elemento <ul>. Gli elementi della lista sono presi dall’array frutti definito nei dati del componente. Ogni frutto verrà visualizzato come un elemento della lista, e l’attributo :key assicura una corretta gestione della reattività quando la lista cambia nel tempo.

Ecco come si presenta questo semplice esempio con la Option API:

<template>
    <div>
        <h2>Lista dei frutti!</h2>
        <ul>
            <li v-for="(frutto, index) in frutti" :key="index"> {{ frutto }}</li>
        </ul>
    </div>    
</template>

<script>
export default {
    name: "ListaFrutti",
    data() {
        return {
            frutti: ['Mela', 'Pera', 'Banana', 'Kiwi', 'Ananas']
        }
    }    
}
</script>

Possiamo usare anche la sintassi Composition API per sviluppare l’esempio con la direttiva v-for in Vue.js:

<template>
  <div>
    <h2>Lista dei frutti!</h2>
    <ul>
      <li v-for="(frutto, index) in frutti" :key="index"> {{ frutto }}</li>
    </ul>
  </div>    
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const frutti = ref(['Mela', 'Pera', 'Banana', 'Kiwi', 'Ananas']);

    return {
      frutti
    };
  }
}
</script>

In questo componente, utilizziamo la Composition API di Vue.js. Utilizziamo la funzione setup() per definire lo stato e la logica del componente. All’interno di setup(), creiamo un riferimento reattivo chiamato frutti utilizzando la funzione ref(), e lo inizializziamo con un array di frutti.

Questo componente funziona in modo analogo alla versione precedente, con la differenza che utilizza la Composition API per definire lo stato del componente. La struttura del template rimane la stessa, con la direttiva v-for che itera attraverso gli elementi dell’array frutti e visualizza ciascun frutto come un elemento <li> all’interno di una lista <ul>.

Secondo esempio d’uso della direttiva v-for in Vue.js

In questo secondo esempio iteriamo un array di oggetti utilizzando Option API. L’array studenti, che dichiariamo in data, contiene oggetti che rappresentano gli studenti, ciascuno con le proprietà nome ed eta.

Dunque nel template, utilizziamo la direttiva v-for in Vue.js per iterare attraverso gli elementi dell’array studenti, e per ciascuno di essi visualizziamo il nome dello studente e la sua età.

<template>
  <div>
    <h2>Lista degli studenti</h2>
    <ul>
      <li v-for="(studente, index) in studenti" :key="index">
        <strong>{{ studente.nome }}</strong> - Età: {{ studente.eta }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      studenti: [
        { nome: 'Mario', eta: 22 },
        { nome: 'Luigi', eta: 25 },
        { nome: 'Giulia', eta: 21 },
        { nome: 'Alessia', eta: 24 },
      ]
    };
  }
};
</script>

Realizziamo poi lo stesso esempio utilizzando la Composition API. Il template rimane sempre lo stesso:

<script>
import { ref } from 'vue';

export default {
  setup() {
    const studenti = ref([
      { nome: 'Mario', eta: 22 },
      { nome: 'Luigi', eta: 25 },
      { nome: 'Giulia', eta: 21 },
      { nome: 'Alessia', eta: 24 },
    ]);

    return {
      studenti
    };
  }
}
</script>

In questo esempio, dunque utilizziamo la Composition API per creare un riferimento reattivo chiamato studenti, inizializzato con l’array di studenti.

Conclusioni

In questa lezione abbiamo parlato della direttiva v-for in Vue.js e abbiamo esaminato due modi per creare un componente Vue che itera su un array di oggetti e visualizza i dati degli oggetti nell’interfaccia utente.

Abbiamo sviluppato esempio con l’utilizzo dell’Option API di Vue, dove abbiamo definito i dati del componente all’interno di un’opzione data() e utilizzato la direttiva v-for per iterare attraverso gli elementi dell’array di dati. E poi abbiamo usato la Composition API di Vue 3 dove abbiamo utilizzato la funzione setup() per definire lo stato del componente e gli altri elementi.

La sintassi e il funzionamento complessivo del componente sono simili, ma con la Composition API possiamo organizzare in modo più flessibile lo stato e la logica del componente.

Entrambi gli approcci hanno i loro vantaggi e possono essere utilizzati in base alle preferenze dello sviluppatore e alle esigenze del progetto. L’Option API è più familiare per gli sviluppatori che hanno esperienza con Vue 2 e versioni precedenti, mentre la Composition API offre un maggiore controllo e una migliore organizzazione del codice, soprattutto in situazioni più complesse.

In definitiva, Vue.js offre diverse opzioni per creare componenti reattivi e dinamici, e la scelta tra l’Option API e la Composition API dipende dalle esigenze specifiche del progetto e dalle preferenze dello sviluppatore.

>> Direttiva v-if

Direttiva v-bind >>