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

Il progetto [vuejs-05] presenta 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] dei progetti precedenti.

7.2. Il componente principale [App]

Il codice del 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 del componente [VFor] è il seguente:

<template>
  <div>
    <!-- un menu a tendina -->
    <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>
    <!-- pulsante -->
    <b-button class="ml-3"
              variant="primary"
              @click="generateErrors"
              v-if="!error">Générer une liste d'erreurs</b-button>
    <!-- avviso -->
    <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",

    // proprietà statiche del componente
    data() {
      return {
        // elenco degli errori
        erreurs: [],
        // errore o meno
        error: false,
        // elenco delle opzioni del menu
        options: [
          { text: "option 1", id: 1 },
          { text: "option 2", id: 2 },
          { text: "option 3", id: 3 }
        ]
      };
    },

    // metodi
    methods: {
      // generazione di un elenco di errori
      generateErrors() {
        this.erreurs = ["erreur 1", "erreur 2", "erreur 3"];
        this.error = true;
      },
      // l'utente ha selezionato un'opzione
      select(index) {
        alert("Vous avez choisi : " + this.options[index].text);
      }
    }
  };
</script>

Commenti

• riga 4: il tag <b-dropdown> serve a definire un menu a tendina [1] sotto forma di pulsante su cui cliccare per visualizzare le opzioni dell'elenco [2]. [text=’Options’] definisce il testo visualizzato sul pulsante [1];
• righe 5-7: il tag <dropdown-item> definisce un elemento dell'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 quello dell’indice sono liberi. Si sarebbe 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 si omette l’attributo [key], ESLint genera un avviso. Il valore dell’attributo [key] deve rimanere costante nel tempo. Pertanto, il valore [index] dell’elemento non è corretto. Infatti, se questo elemento viene eliminato, i valori [index] di quelli che lo seguono nell’elenco verranno decrementati di 1. Pertanto, anche in questo caso, si utilizza come valore chiave il valore [option.id], righe 38-40, che non cambierà in caso di eliminazione di un elemento. L’attributo [key] è un elemento di ottimizzazione della rigenerazione del DOM (Document Object Model) da parte di [Vue.js] quando l’elenco deve essere rigenerato. 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 cliccherà 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] indica un margine (m) sinistro (l) di tre spazi. [@click="generateErrors"] indica che il metodo [generateErrors], righe 45-48, verrà eseguito quando si esegue un [click] sul pulsante. [v-if="!error"] indica che la visualizzazione del pulsante dipende dal valore dell’attributo statico [error] della riga 35;
• righe 15-21: un avviso di tipo [danger] [4], anch’esso controllato dall’attributo statico [error] della riga 35. L'attributo [class=’mt-3’] (margin top 3 spacers) definisce lo spazio tra questo avviso e l'elemento che si trova sopra di esso;
• riga 27: il tag HTML <br /> crea un'interruzione di riga;
• riga 18: inizio di un elenco non ordinato [ul=unordered list];
• riga 19: il tag <li> definisce un elemento dell’elenco <ul>. Anche in questo caso, si utilizza una direttiva [v-for] per generare il tag più volte. Tante volte quante sono gli elementi della tabella [erreurs] della riga 33. Qui si utilizza l’attributo [:key=index]. Abbiamo detto in precedenza che l’indice degli elementi di un elenco non costituisce un buon criterio di distinzione tra gli elementi dell’elenco, poiché in caso di eliminazione di un elemento, tutti gli elementi successivi vedono cambiare il proprio indice. In questo caso ciò non ha importanza, poiché gli elementi dell’elenco degli errori non sono suscettibili di essere eliminati;
• riga 19: l’elemento serve a visualizzare l’elemento [erreur] dell’elenco [erreurs];
• righe 30-43: tutti gli elementi dinamici di [template] sono attributi del componente. Qui non vi è alcuna proprietà di tipo [props] il cui valore sia fissato dal componente padre;
• righe 48-55: il metodo [generateErrors] genera l’elenco degli errori da visualizzare tramite il tag <ul> delle 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