Vue.js 3.x – 06 – Renderizando coleções

ATENÇÃO! Para acessar o post anterior a este, em que abordo o conceito de renderização condicional, clique aqui!

A ideia de renderizar coleções é fazer com que um array ou array de objetos seja iterado e exibido para o usuário. Há diversos cenários em que precisamos fazer isso, como por exemplo ao mostrar uma lista de produtos em um carrinho de compras ou uma lista com o resultado de uma pesquisa em um site.

O código a seguir mostra um simples exemplo de como iterar sobre um array. Primeiro vamos no bloco template adicionar os dados. Depois, vamos ao bloco template para utilizar a diretiva v-for para iterar sobre o array.

<script>
export default {
  data() {
    return {
      //..array de produtos
      products: ['Laptop', 'Smartphone', 'Camera', 'Smartv'],
    };
  },
};
</script>

<template>
  <div>
    <h1>Lista de Produtos</h1>
    <!-- usando a diretiva v-for para iterar coleções 
         o atributo :key é usado como uma chave única, 
         para controlar a iteração. -->
    <ul v-for="product in products" :key="product">
      <li>
        {{ product }}
      </li>
    </ul>
  </div>
</template>

Como pode ser observado no código do bloco template, é necessário usar o atributo :key para especificar uma chave única, a fim de controlar o laço de repetição. Logo, o valor especificado em :key não pode ser repetido. O resultado deve ser como a seguir.

Também é possível fornecer um iterador, caso haja elementos não únicos, e também para facilitar o controle da iteração. Veja como fica a diretiva v-for no exemplo a seguir.

<template>
  <div>
    <h1>Lista de Produtos</h1>
    <!-- usando um iterador (i) como chave -->
    <ul v-for="(product, i) in products" :key="i">
      <li>
        <!-- mostrando o iterador "i" -->
        {{ i }} - {{  product }}
      </li>
    </ul>
  </div>
</template>

O resultado deve ser algo assim:

Iterando um array de objetos

Agora vamos modificar o código do bloco script para retornar um array de objetos contendo duas propriedades: name e category. Veja o código a seguir.

<script>
export default {
  data() {
    return {
      //..array de objetos
      products: [
        {name : 'Smartphone', category : 'Eletronics' },
        {name : 'Smartv', category : 'Eletronics' },
        {name : 'Laptop', category : 'Computers' }
      ],
    };
  },
};
</script>

Vamos modificar o bloco template para exibir os produtos, considerando as propriedades name e category do objeto JSON retornado. Veja o código a seguir.

<template>
  <div>
    <h1>Lista de Produtos</h1>
    <!-- declarando a v-for normalmente -->
    <ul v-for="(p, i) in products" :key="i">
      <li>
        <!-- fazendo referência aos objetos e atributos -->
        {{ p.name }} - {{ p.category }}
      </li>
    </ul>
  </div>
</template>

O resultado deve ser algo parecido com a figura a seguir.

Lembre-se de usar a extensão Vue.js DevTools para verificar os objetos da aplicação. Na figura a seguir é mostrado como a extensão Vue.js Devtools mostra o array de objetos. Não sabe como instalar a extensão Vue.js Devtools? Clique aqui!

Renderizando um array de arrays

No exemplo a seguir, iremos renderizar arrays e objetos aninhados. Vamos modificar o bloco script para retornar atores e seus filmes. Veja o código a seguir.

<script>
export default {
  data() {
    return {
        actors : [
            { name: 'Chris Evans', movies : 
                ['Capitain America', 'Avengers', 'Civil War']
            }, 
            { name : 'Robert Downey Jr.', movies : 
                ['Iron Man', 'Avengers', 'Infinite War']
            }
        ]
    }
  },
};
</script>

Depois, vamos modificar o bloco template para iterar sobre essa coleção. Veja no código comentaçdo a seguir que usamos a diretiva v-for aninhada, considerando a estrutura do objeto JSON retornado.

<template>
  <div>
    <h1>Actor List</h1>
    <!-- o atributo key é o nome do ator -->
    <ul v-for="actor in actors" :key="actor.name">
        <li>{{ actor.name }}
            <!-- pegando o array de filmes - a chave é o nome do filme -->
            <ul v-for="movie in actor.movies" :key="movie">
                <li> {{ movie }} </li>
            </ul>
        </li>          
    </ul>
  </div>
</template>

O resultado deve ser algo assim:

Iterando propriedades de um objeto

Para iterar propriedades de um objeto é muito simples. Primeiro vamos adicionar um novo objeto em return. Após o fechamento do array de atores, adicione a seguinte propriedade:

myInfo : {
   fullName : 'Jorge Luís Gregório',
   site : 'www.jlgregorio.com.br',
   instagram : 'prof.jlgregorio'
}

Para exibir os dados da propriedade myInfo, podemos fazer assim:

<p v-for="info in myInfo" :key="info"> {{ info }} </p>

Ou assim:

<p v-for="(info, prop) in myInfo" :key="info"> {{ prop }} : {{ info }}</p>

Iteração condicional

A iteração condicional não permite usar as diretivas v-if e v-for em conjunto. Assim, uma das soluções é usar a tag template. Veja o exemplo a seguir.

<template v-for="actor in actors" :key="actor.name">
   <p v-if="actor.name === 'Chris Evans' ">{{ actor.name }}</p>
</template>

Considerações finais

Iterar sobre coleções é uma das coisas mais usadas em diversos cenários. Com a diretiva v-for, o Vue.js consegue simplificar o código ao mesmo tempo que nos dá um grande poder sobre os objetos.

Para saber mais sobre a diretiva v-for, consulte a documentação oficial clicando aqui.

No próximo post iremos falar sobre métodos e eventos. Até breve!