8. Renderização de listas (Introdução ao Vue.js)

Nesse tópico vamos aprender como mostrar listas em nossas páginas usando o Vue.

Se você caiu de paraquedas aqui, saiba que esse post faz parte de uma série de tópicos sobre como aprender os conceitos básicos do Vue.js criando um Gerador de Memes.

Renderização de listas

Vamos aprender como mostrar listas em nossas páginas usando o Vue.

Objetivo

Mostar uma lista com as cores disponíveis para o texto.

Código inicial

Primeiramente vamos adicionar abaixo do nosso objeto text um array com as seguintes cores no nosso main.js

Problema

• Nós precisamos mostrar as cores do texto para que o usuário possa selecionar qual que ele deseja.
• Como nós podemos iterar o array de cores e mostrar na nossa página?

Solução (v-for)

• No Vue.js existe uma diretiva chamada v-for que permite iterar um array para então podermos renderizar os dados dele.
• Então dentro da tag que queremos renderizar os dados vamos incluir a diretiva e vamos passar por cada item v-for="color in colors". E depois basta apenas mostrar o valor do item {{ color }}. Vamos adicionar o código abaixo dos inputs.

e visualizar o resultado:

Outros exemplos — Diretiva v-for (arrays)

Você pode também além do item mostrar o valor do index.

Resultado (arrays)

Diretiva v-for (array de objetos)

Você também consegue facilmente iterar objetos, por exemplo temos um array de estudantes

Onde você consegue acessar a propriedade de cada objeto usando notação de ponto

Resultado (array de objetos)

Diretiva v-for (array de objetos)

• Nota que é recomendado usar um atributo :key quando for utilizar o v-for, para que o Vue possa manter a identidade de cada item.

Adicionar o atributo :key

Então para finalizar vamos adicionar a :key em nosso exemplo das cores:

8. Renderização de listas — (O que aprendemos)

• A diretiva v-for permite iterar um array para mostrar os dados;
• Nós usamos um apelido para o elemento do array que está sendo iterado, e também especificamos o nome do array em que estamos iterando. Exemplo: v-for="item in items";
• Nós podemos percorrer um array de objetos e usar a notação de ponto, para acessar os valores dos objetos;
• Quando é usado o v-for é recomendado atribuir uma chave unica a cada elemento em seu atributo :key.

Próximo post

9. Interligações de classe e estilo (Introdução ao Vue.js)

Referências

List Rendering - Vue.js