Renderizar listas

  • 4 minutos

Geralmente, o trabalho que usa dados envolve matrizes ou outros tipos de coleções. Normalmente, você itera em todos os itens de uma coleção usando alguma forma de loop. O Vue.js dá suporte a loops por meio de uma diretiva chamada v-for.

Introdução à diretiva v-for

Para exibir todos os itens em uma lista, você pode usar a diretiva v-for. v-for comporta-se de maneira muito parecida com um loop for...of em JavaScript. Ele itera em uma coleção, fornecendo acesso a cada item por meio da variável que você declarar.

A sintaxe de v-for é semelhante a:

v-for="itemName in collectionName"

collectionName é o nome da matriz em seu objeto de dados. Para cada iteração, itemName pressupõe a identidade de seu item atual. Para usar v-for em um modelo, você adiciona a diretiva dentro de uma declaração do elemento. Fazer isso repete o elemento HTML tantas vezes quantos forem os itens na matriz.

Observação

Se estiver criando uma lista não ordenada (ul), você não adicionará v-for ao elemento ul. Você o adiciona ao elemento li, pois o elemento li é o que será repetido.

Usar v-for em um aplicativo

Para usar a diretiva v-for em um aplicativo, você precisa fazer duas coisas:

  • Expor uma matriz por meio de seu objeto de dados. Para usar a diretiva v-for, verifique se há dados do tipo matriz que seu método data() está retornando.
  • Adicionar a diretiva v-for a um elemento. Adicione a diretiva v-for a um elemento HTML. Para exibir dados da matriz, use a sintaxe de chaves duplas ({{ }}).

Digamos que você queira expor uma matriz de nomes em seu objeto de dados:

Vue.createApp({
    data() {
        return {
            names: ['Susan', 'Peter', 'Bill' ]
        }
    }
}).mount('#demo');

Se quiser exibir os itens, você poderá usar o seguinte código:

<ul id="demo">
    <li v-for="name in names">{{ name }}</li>
</ul>

Quando o código é renderizado, todos os nomes na matriz são exibidos:

  • Susan
  • Peter
  • Bill

Chaves e estado

Se os dados forem modificados, o Vue.js precisará ser capaz de atualizar as partes apropriadas da exibição. Quando você está trabalhando com uma lista, é melhor atualizar o item individual em vez da lista inteira. Para permitir que o Vue.js encontre um item individual, dê a cada item exibido uma chave. Você não precisa adicionar a chave ao objeto de dados, basta gerá-la usando o índice da matriz.

Você pode obter o índice atualizando a declaração v-for, conforme mostrado no seguinte código:

<ul id="demo">
    <li v-for="(name, index) in names" :key="index">{{ name }}</li>
</ul>

index é incrementado para cada item na matriz. A diretiva :key armazena a chave para o Vue.js, o que permite atualizar o item individual conforme as alterações ocorrem.