7. proyecto [vuejs-05]: directiva [v-for]

El proyecto [vuejs-05] presenta la directiva [v-for]:

7.1. El script principal [main.js]

El código del script principal [main.js] es idéntico al del script [main.js] de los proyectos anteriores.

7.2. El componente principal [App]

El código del componente [App] es el siguiente:

<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>

• líneas 7, 14, 19: el componente [App] utiliza el componente [VFor];

7.3. El componente [VFor]

El resultado visual será el siguiente:

El código del componente [VFor] es el siguiente:

<template>
  <div>
    <!-- una lista desplegable -->
    <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>
    <!-- botón -->
    <b-button class="ml-3"
              variant="primary"
              @click="generateErrors"
              v-if="!error">Générer une liste d'erreurs</b-button>
    <!-- alerta -->
    <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",

    // propiedades estáticas del componente
    data() {
      return {
        // lista de errores
        erreurs: [],
        // error o no
        error: false,
        // lista de opciones del menú
        options: [
          { text: "option 1", id: 1 },
          { text: "option 2", id: 2 },
          { text: "option 3", id: 3 }
        ]
      };
    },

    // métodos
    methods: {
      // generación de una lista de errores
      generateErrors() {
        this.erreurs = ["erreur 1", "erreur 2", "erreur 3"];
        this.error = true;
      },
      // el usuario ha seleccionado una opción
      select(index) {
        alert("Vous avez choisi : " + this.options[index].text);
      }
    }
  };
</script>

Comentarios

• línea 4: la etiqueta <b-dropdown> sirve para definir una lista desplegable [1] en forma de botón en el que se hace clic para ver las opciones de la lista [2]. [text=’Options’] define el texto que se muestra en el botón [1];
• líneas 5-7: la etiqueta <dropdown-item> define un elemento de la lista desplegable;
• línea 5: el atributo [v-for] indica que la etiqueta <dropdown-item> debe repetirse para cada elemento [option] del atributo [options], líneas 37-41, del componente. [index] representa el número del elemento en la lista [0, 1, ..., n]. El nombre del elemento [option], así como el del índice, son libres. Se podría haber escrito [<b-dropdown-item v-for="(o,i) in options" :key="o.id" @click="select(i)">{{o.text}}</b-dropdown-item>];
• línea 6: si se omite el atributo [key], ESLint emite una advertencia. El valor del atributo [key] debe mantenerse a lo largo del tiempo. Por lo tanto, el valor [index] del elemento no es adecuado. Porque si se elimina este elemento, los valores [index] de los que están detrás de él en la lista se reducirán en 1. Por lo tanto, aquí se toma como valor de clave el valor [option.id], líneas 38-40, que no cambiará en caso de eliminación de un elemento. El atributo [key] es un elemento de optimización de la regeneración del DOM (Document Object Model) por parte de [Vue.js] cuando la lista debe regenerarse. Tenga en cuenta la notación [:key], ya que [key] tiene un valor dinámico;
• línea 7: el método [select(index)], líneas 49-51, se llamará cuando el usuario haga clic en un elemento de la lista;
• línea 7: el texto de la opción será el valor [option.text] definido en las líneas 37-41;
• línea 10: el botón [3]. [class=’ml-3] significa margen (m) izquierdo (l) de tres espaciadores. [@click="generateErrors"] indica que el método [generateErrors], líneas 45-48, se ejecutará al pulsar [click] en el botón. [v-if="!error"] indica que la visualización del botón depende del valor del atributo estático [error] de la línea 35;
• líneas 15-21: una alerta de tipo [danger] [4] controlada también por el atributo estático [error] de la línea 35. El atributo [class=’mt-3’] (margin top 3 spacers) establece el espacio entre esta alerta y el elemento que se encuentra encima de ella;
• línea 27: la etiqueta HTML <br /> crea un salto de línea;
• línea 18: inicio de una lista no ordenada [ul=unordered list];
• línea 19: la etiqueta <li> define un elemento de la lista <ul>. Aquí también se utiliza una directiva [v-for] para generar la etiqueta varias veces. Tantas veces aquí como elementos tenga la tabla [erreurs] de la línea 33. Aquí se utiliza el atributo [:key=index]. Anteriormente se ha dicho que el índice de los elementos de una lista no es un buen discriminante entre los elementos de la lista, ya que, en caso de eliminar un elemento, todos los elementos siguientes ven cómo cambia su índice. Aquí esto no tiene importancia, ya que los elementos de la lista de errores no son susceptibles de ser eliminados;
• línea 19: el elemento sirve para mostrar el elemento [erreur] de la lista [erreurs];
• líneas 30-43: todos los elementos dinámicos de [template] son atributos del componente. Aquí no hay ninguna propiedad de tipo [props] cuyo valor sea fijado por el componente padre;
• líneas 48-55: el método [generateErrors] genera la lista de errores que se mostrará mediante la etiqueta <ul> de las líneas 16-18. Además, modifica el atributo estático [error], tanto para mostrar esta lista de errores (línea 15) como para ocultar el botón de generación (línea 13);

7.4. Ejecución del proyecto