No capítulo anterior você aprendeu sobre v-if, o v-show e o v-else. Agora é a hora de aprender o que é o v-for, que também se encaixa como uma diretiva. Entenda o passo a passo e aprenda como utilizá-lo no seu código Vue.js.
A diretiva v-for é bem semelhante com qualquer outra declaração de loop de qualquer linguagem de programação. De uma forma geral, algo vai percorrer entre o seus dados, que geralmente é um array. E durante esse loop você pode apresentar o que for necessário para seu usuário.
Tá difícil? Tem um vídeo massa pra você…
Vamos para a prática então…
O primeiro passo é criar uma variável (array de objetos) dentro da data. Vamos supor que ela se chama linguagens e traz consigo cinco itens como no código abaixo:
data: {
linguagens: [
{ nome: 'Javascript' },
{ nome: 'PHP' },
{ nome: 'C#' },
{ nome: 'Java' },
{ nome: 'Python' },
],
},
Então agora vamos criar uma lista no html e imprimir o nome de cada linguagem de uma só vez usando o v-for.
<ul>
<li v-for="item in linguagens">
{{ item }}
</li>
</ul>
Perceba que usamos o v-for no li e criamos uma variável interna chamada item.
Por que variável interna?
Por que essa variável só vai funcionar dentro desse loop, ou seja, dentro e especificamente do li.
Simples não?
Porém, isso fará com que imprima o objeto completo, como por exemplo, { nome: “Javascript” } e não o nome exatamente, que é o que agente quer, certo?
Muito simples, basta a gente então chamar o campo nome dessa forma abaixo.
<ul>
<li v-for="item in linguagens">
{{ item.nome }}
</li>
</ul>
Aprendeu? Lembre-se que é importante treinar o passo a passo para fixar a informação. Quando se pensa em programação, não basta só ler e assistir vídeos, a parte prática é fundamental.
Se você gostou dessa aula, não deixe de ficar atento às próximas. O Vue.js tem um mundo de conhecimentos a ser desbravado, e eu vou te ajudar a encontrar a solução para cada uma das suas dúvidas. Então, fique ligado, revise o conteúdo e bons estudos!
