7. Projeto [vuejs-05]: diretiva [v-for]

O projeto [vuejs-05] apresenta a diretiva [v-for]:

7.1. O script principal [main.js]

O código do script principal [main.js] é idêntico ao do script [main.js] dos projetos anteriores.

7.2. O componente principal [App]

O código do componente [App] é o seguinte:

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

• linhas 7, 14, 19: o componente [App] utiliza o componente [VFor];

7.3. O componente [VFor]

A exibição será a seguinte:

O código do componente [VFor] é o seguinte:

<template>
  <div>
    <!-- uma lista suspensa -->
    <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ão -->
    <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",

    // propriedades estáticas do componente
    data() {
      return {
        // lista de erros
        erreurs: [],
        // erro ou não
        error: false,
        // lista de opções do menu
        options: [
          { text: "option 1", id: 1 },
          { text: "option 2", id: 2 },
          { text: "option 3", id: 3 }
        ]
      };
    },

    // métodos
    methods: {
      // geração de uma lista de erros
      generateErrors() {
        this.erreurs = ["erreur 1", "erreur 2", "erreur 3"];
        this.error = true;
      },
      // o usuário selecionou uma opção
      select(index) {
        alert("Vous avez choisi : " + this.options[index].text);
      }
    }
  };
</script>

Comentários

• linha 4: a tag <b-dropdown> serve para definir uma lista suspensa [1] na forma de um botão que, ao ser clicado, exibe as opções da lista [2]. [text=’Options’] define o texto exibido no botão [1];
• linhas 5-7: a tag <dropdown-item> define um item da lista suspensa;
• linha 5: o atributo [v-for] indica que a tag <dropdown-item> deve ser repetida para cada elemento [option] do atributo [options], linhas 37-41, do componente. [index] representa o número do elemento na lista [0, 1, ..., n]. O nome do elemento [option], assim como o do índice, podem ser definidos livremente. Teria sido possível escrever [<b-dropdown-item v-for="(o,i) in options" :key="o.id" @click="select(i)">{{o.text}}</b-dropdown-item>];
• linha 6: se o atributo [key] for omitido, ESLint gera um aviso. O valor do atributo [key] deve permanecer constante ao longo do tempo. Portanto, o valor [index] do elemento não é adequado. Pois, se esse elemento for excluído, os valores [index] dos elementos que vêm a seguir na lista serão diminuídos em 1. Portanto, aqui, toma-se como valor-chave o valor [option.id], linhas 38-40, que não se alterará caso um elemento seja excluído. O atributo [key] é um elemento de otimização da regeneração do DOM (Document Object Model) pelo [Vue.js] quando a lista precisa ser regenerada. Observe a notação [:key], pois [key] possui um valor dinâmico;
• linha 7: o método [select(index)], linhas 49-51, será chamado quando o usuário clicar em um item da lista;
• linha 7: o texto da opção será o valor [option.text] definido nas linhas 37 a 41;
• linha 10: o botão [3]. [class=’ml-3] significa margem (m) à esquerda (l) de três espaçadores. [@click="generateErrors"] indica que o método [generateErrors], linhas 45 a 48, será executado ao clicar no botão. [v-if="!error"] indica que a exibição do botão depende do valor do atributo estático [error] da linha 35;
• linhas 15-21: um alerta do tipo [danger] [4], também controlado pelo atributo estático [error] da linha 35. O atributo [class=’mt-3’] (margin top 3 spacers) define o espaço entre esse alerta e o elemento que está acima dele;
• linha 27: a tag HTML <br /> cria um salto de linha;
• linha 18: início de uma lista não ordenada [ul=unordered list];
• linha 19: a tag <li> define um elemento da lista <ul>. Mais uma vez, utiliza-se uma diretiva [v-for] para gerar a tag várias vezes. Tantas vezes aqui quantos forem os elementos da tabela [erreurs] da linha 33. Aqui, utiliza-se o atributo [:key=index]. Já mencionamos anteriormente que o índice dos elementos de uma lista não é um bom critério de distinção entre os elementos da lista, pois, caso um elemento seja excluído, todos os elementos seguintes têm seu índice alterado. Aqui isso não importa, pois os elementos da lista de erros não são suscetíveis de serem excluídos;
• linha 19: o elemento serve para exibir o elemento [erreur] da lista [erreurs];
• linhas 30-43: todos os elementos dinâmicos do [template] são atributos do componente. Aqui não há nenhuma propriedade do tipo [props] cujo valor seja definido pelo componente pai;
• linhas 48-55: o método [generateErrors] gera a lista de erros a ser exibida pela tag <ul> das linhas 16-18. Além disso, ele modifica o atributo estático [error], tanto para exibir essa lista de erros (linha 15) quanto para ocultar o botão de geração (linha 13);

7.4. Execução do projeto