7. Project [vuejs-05]: Directive [v-for]

The [vuejs-05] project contains the [v-for] directive:

7.1. The main script [main.js]

The code for the main script [main.js] is identical to that of the script [main.js] from the previous projects.

7.2. The main component [App]

The code for the component [App] is as follows:

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

• Lines 7, 14, 19: The component [App] uses the component [VFor];

7.3. The component [VFor]

The visual output will be as follows:

The code for the [VFor] component is as follows:

<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",
 
    // component static properties
    data() {
      return {
        // error list
        erreurs: [],
        // error or not
        error: false,
        // list of menu options
        options: [
          { text: "option 1", id: 1 },
          { text: "option 2", id: 2 },
          { text: "option 3", id: 3 }
        ]
      };
    },
 
    // methods
    methods: {
      // error list generation
      generateErrors() {
        this.erreurs = ["erreur 1", "erreur 2", "erreur 3"];
        this.error = true;
      },
      // the user has selected a option
      select(index) {
        alert("Vous avez choisi : " + this.options[index].text);
      }
    }
  };
</script>

Comments

• line 4: the <b-dropdown> tag is used to define a dropdown list [1] in the form of a button that you click to view the list options [2]. [text=’Options’] defines the text displayed on the button [1];
• lines 5–7: the <dropdown-item> tag defines an item in the dropdown list;
• line 5: the [v-for] attribute indicates that the <dropdown-item> tag must be repeated for each [option] element of the [options] attribute, lines 37–41, of the component. [index] represents the item number in the [0, 1, ..., n] list. The name of the [option] item and the index name are arbitrary. We could have written [<b-dropdown-item v-for="(o,i) in options" :key="o.id" @click="select(i)">{{o.text}}</b-dropdown-item>];
• Line 6: If the [key] attribute is omitted, ESLint issues a warning. The value of the [key] attribute must remain consistent over time. Therefore, the value [index] for the element is not suitable. Because if this element is deleted, the values [index] of those following it in the list will be decremented by 1. Therefore, here, the value [option.id] is used as the key value (lines 38–40), which will not change if an element is deleted. The [key] attribute is an optimization element for regenerating DOM (Document Object Model) via [Vue.js] when the list needs to be regenerated. Note the notation [:key], because [key] has a dynamic value;
• line 7: the [select(index)] method, lines 49–51, will be called when the user clicks on an item in the list;
• Line 7: The text of option will be the value [option.text] defined on lines 37–41;
• line 10: the button [3]. [class=’ml-3] means a margin (m) of three spacers to the left (l). [@click="generateErrors"] indicates that the method [generateErrors], lines 45–48, will be executed when [click] is clicked on the button. [v-if="!error"] indicates that the button’s display is conditional on the value of the static attribute [error] in line 35;
• lines 15–21: a [danger] [4] alert, also controlled by the static attribute [error] on line 35. The [class=’mt-3’] attribute (margin top 3 spacers) sets the spacing between this alert and the element above it;
• line 27: the HTML <br /> tag creates a line break;
• line 18: start of an unordered list [ul=unordered list];
• line 19: the li tag defines a list item ul. Here again, a [v-for] directive is used to generate the tag multiple times. As many times here as the array [erreurs] on line 33 has elements. The attribute [:key=index] is used here. We mentioned earlier that the index of list items is not a good way to distinguish between list items because if an item is deleted, the indices of all subsequent items change. Here, this does not matter because the items in the error list are not likely to be deleted;
• line 19: this element is used to display the [erreur] element from the [erreurs] list;
• lines 30–43: all dynamic elements of [template] are attributes of the component. There are no properties of type [props] here whose value is set by the parent component;
• lines 48–55: the [generateErrors] method generates the list of errors to be displayed by the <ul> tag in lines 16–18. In addition, it modifies the static attribute [error], both to display this error list (line 15) and to hide the generation button (line 13);

7.4. Running the