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

Play Video

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!