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]

O resultado visual será o seguinte:

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

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

Comentários

• linha 4: a tag <b-dropdown> é utilizada para definir uma lista suspensa [1] na forma de um botão em que se clica para ver as opções da lista [2]. [text='Opções'] define o texto apresentado no botão [1];
• linhas 5–7: a tag <dropdown-item> define um item na 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] e o índice são arbitrários. Poderíamos ter escrito [<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, o ESLint emite um aviso. O valor do atributo [key] deve permanecer consistente ao longo do tempo. Por isso, o valor [index] do elemento não é adequado. Isto porque, se este elemento for removido, os valores [index] dos elementos que se seguem na lista serão diminuídos em 1. Assim, aqui, usamos o valor [option.id] como valor-chave, linhas 38–40, que não se alterará se um elemento for removido. O atributo [key] é utilizado pelo [Vue.js] para otimizar a re-renderização do DOM (Document Object Model) quando a lista precisa de ser re-renderizada. Repare na notação [:key], uma vez que [key] tem um valor dinâmico;
• linha 7: o método [select(index)], linhas 49–51, será chamado quando o utilizador clicar num item da lista;
• linha 7: o texto da opção será o valor [option.text] definido nas linhas 37–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–48, será executado após um [clique] no botão. [v-if="!error"] indica que a exibição do botão depende do valor do atributo estático [error] na linha 35;
• linhas 15–21: um alerta [danger] [4], também controlado pelo atributo estático [error] na linha 35. O atributo [class=’mt-3’] (margem superior de 3 espaçadores) define o espaço entre este alerta e o elemento acima dele;
• linha 27: a tag HTML <br /> cria uma quebra de linha;
• linha 18: início de uma lista não ordenada [ul=lista não ordenada];
• linha 19: a tag <li> define um item de lista <ul>. Aqui, mais uma vez, usamos uma diretiva [v-for] para gerar a tag várias vezes — tantas vezes quantos forem os elementos na matriz [errors] na linha 33. Usamos o atributo [:key=index] aqui. Mencionámos anteriormente que o índice dos itens da lista não é uma boa forma de distinguir entre itens da lista, porque se um item for removido, os índices de todos os itens subsequentes mudam. Aqui, isso não importa, porque é improvável que os itens da lista de erros sejam removidos;
• linha 19: esta linha é usada para exibir o elemento [error] da lista [errors];
• linhas 30–43: Todos os elementos dinâmicos no [template] são atributos do componente. Não há propriedades [props] aqui cujos valores sejam definidos pelo componente pai;
• linhas 48–55: O método [generateErrors] gera a lista de erros a ser exibida pela tag <ul> nas linhas 16–18. Além disso, modifica o atributo estático [error], tanto para exibir esta lista de erros (linha 15) como para ocultar o botão de geração (linha 13);

7.4. Executar o projeto