7. Progetto [vuejs-05]: direttiva [v-for]

Il progetto [vuejs-05] introduce la direttiva [v-for]:

7.1. Lo script principale [main.js]

Il codice dello script principale [main.js] è identico a quello dello script [main.js] nei progetti precedenti.

7.2. Il componente principale [App]

Il codice per il componente [App] è il seguente:

<template>
  <b-container>
    <b-card>
      <b-alert show variant="success" align="center">
        <h4>[vuejs-05] : attribut [v-for]</h4>
      </b-alert>
      <VFor />
    </b-card>
  </b-container>
</template>
 
 
<script>
  import VFor from "./components/VFor.vue";
 
  export default {
    name: "app",
    components: {
      VFor
    }
  };
</script>

• righe 7, 14, 19: il componente [App] utilizza il componente [VFor];

7.3. Il componente [VFor]

Il risultato visivo sarà il seguente:

Il codice per il componente [VFor] è il seguente:

<template>
  <div>
    <!-- a drop-down list -->
    <b-dropdown id="dropdown" text="Options">
      <b-dropdown-item v-for="(option,index) in options"
                       :key="option.id"
                       @click="select(index)">{{option.text}}</b-dropdown-item>
    </b-dropdown>
    <!-- button -->
    <b-button class="ml-3"
              variant="primary"
              @click="generateErrors"
              v-if="!error">Générer une liste d'erreurs</b-button>
    <!-- alert -->
    <b-alert show variant="danger" v-if="error" class="mt-3">
      Les erreurs suivantes se sont produites :
      <br />
      <ul>
        <li v-for="(erreur,index) in erreurs" :key="index">{{erreur}}</li>
      </ul>
    </b-alert>
  </div>
</template>
<!-- script -->
<script>
  export default {
    name: "VFor",
 
    // propriétés statiques du composant
    data() {
      return {
        // liste des erreurs
        erreurs: [],
        // erreur ou pas
        error: false,
        // liste des options du menu
        options: [
          { text: "option 1", id: 1 },
          { text: "option 2", id: 2 },
          { text: "option 3", id: 3 }
        ]
      };
    },
 
    // méthodes
    methods: {
      // génération d'une liste d'erreurs
      generateErrors() {
        this.erreurs = ["erreur 1", "erreur 2", "erreur 3"];
        this.error = true;
      },
      // l'utilisateur a sélectionné une option
      select(index) {
        alert("Vous avez choisi : " + this.options[index].text);
      }
    }
  };
</script>

Commenti

• riga 4: il tag <b-dropdown> viene utilizzato per definire un elenco a discesa [1] sotto forma di pulsante su cui cliccare per visualizzare le opzioni dell'elenco [2]. [text='Opzioni'] definisce il testo visualizzato sul pulsante [1];
• righe 5–7: il tag <dropdown-item> definisce una voce nell'elenco a discesa;
• riga 5: l'attributo [v-for] indica che il tag <dropdown-item> deve essere ripetuto per ogni elemento [option] dell'attributo [options], righe 37–41, del componente. [index] rappresenta il numero dell'elemento nell'elenco [0, 1, ..., n]. Il nome dell'elemento [option] e l'indice sono arbitrari. Avremmo potuto scrivere [<b-dropdown-item v-for="(o,i) in options" :key="o.id" @click="select(i)">{{o.text}}</b-dropdown-item>];
• riga 6: se l'attributo [key] viene omesso, ESLint emette un avviso. Il valore dell'attributo [key] deve rimanere costante nel tempo. Pertanto, il valore [index] dell'elemento non è adatto. Infatti, se questo elemento venisse rimosso, i valori [index] degli elementi che lo seguono nell'elenco verrebbero decrementati di 1. Quindi, in questo caso, utilizziamo il valore [option.id] come valore chiave, righe 38–40, che non cambierà se un elemento viene rimosso. L'attributo [key] viene utilizzato da [Vue.js] per ottimizzare il re-rendering del DOM (Document Object Model) quando l'elenco deve essere re-renderizzato. Si noti la notazione [:key], poiché [key] ha un valore dinamico;
• riga 7: il metodo [select(index)], righe 49–51, verrà chiamato quando l'utente clicca su un elemento dell'elenco;
• riga 7: il testo dell'opzione sarà il valore [option.text] definito alle righe 37–41;
• riga 10: il pulsante [3]. [class=’ml-3] significa margine (m) sinistro (l) di tre spaziatori. [@click="generateErrors"] indica che il metodo [generateErrors], righe 45–48, verrà eseguito al [click] sul pulsante. [v-if="!error"] indica che la visualizzazione del pulsante dipende dal valore dell'attributo statico [error] alla riga 35;
• righe 15–21: un avviso [danger] [4], anch’esso controllato dall’attributo statico [error] alla riga 35. L’attributo [class=’mt-3’] (margine superiore di 3 spazi) imposta lo spazio tra questo avviso e l’elemento sopra di esso;
• riga 27: il tag HTML <br /> crea un'interruzione di riga;
• riga 18: inizio di un elenco non ordinato [ul=elenco non ordinato];
• riga 19: il tag <li> definisce una voce dell'elenco <ul>. Anche in questo caso, utilizziamo una direttiva [v-for] per generare il tag più volte, tante quante sono le voci presenti nell'array [errors] alla riga 33. Qui utilizziamo l'attributo [:key=index]. Abbiamo accennato in precedenza al fatto che l’indice delle voci dell’elenco non è un buon modo per distinguerle tra loro, poiché se una voce viene rimossa, cambiano gli indici di tutte le voci successive. In questo caso, ciò non ha importanza perché è improbabile che le voci nell’elenco degli errori vengano rimosse;
• riga 19: questa riga viene utilizzata per visualizzare l'elemento [error] dall'elenco [errors];
• righe 30–43: tutti gli elementi dinamici nel [template] sono attributi del componente. Qui non ci sono proprietà [props] i cui valori sono impostati dal componente padre;
• righe 48–55: il metodo [generateErrors] genera l'elenco degli errori da visualizzare tramite il tag <ul> nelle righe 16–18. Inoltre, modifica l'attributo statico [error], sia per visualizzare questo elenco di errori (riga 15) sia per nascondere il pulsante di generazione (riga 13);

7.4. Esecuzione del progetto