Renderização de Listas com a Diretiva v-for

No Vue.js, a diretiva v-for permite iterar sobre arrays e exibir seus elementos no DOM. A sintaxe básica é:

v-for="item in items"

Nesse caso, items é o array a ser percorrido, enquanto item é o alias que referencia o elemento atual durante a iteração.

Por exemplo, o seguinte código exibe uma lista de nomes contidos em um array:

<!DOCTYPE html>
<html>
<head>
    <title>Explorando Vue.js</title>
    <meta charset="utf-8" />
</head>
<body>
    <script src="https://unpkg.com/vue"></script>
    <div id="app">
    <ul>
        <li v-for="user in users">{{ user }}</li>
    </ul>
    </div>
    <script>
    Vue.createApp({
        data() {
          return { users: ['Tom', 'Sam', 'Alice', 'Kate'] }
        }
    }).mount('#app');
    </script>
</body>
</html>

Neste exemplo, cada elemento do array users é transformado em um elemento <li> na página. O alias user permite acessar o valor atual durante a iteração.

Iterando sobre Arrays de Objetos

É possível exibir propriedades de objetos mais complexos contidos em um array. Veja o exemplo a seguir:

<!DOCTYPE html>
<html>
<head>
    <title>Explorando Vue.js</title>
    <meta charset="utf-8" />
</head>
<body>
    <script src="https://unpkg.com/vue"></script>
    <div id="app">
    <ul>
        <li v-for="user in users">
          <p>Nome: {{ user.name }}</p>
          <p>Idade: {{ user.age }}</p>
        </li>
    </ul>
    </div>
    <script>
    Vue.createApp({
        data() {
        return { users: [
            { name: 'Tom', age: 22 },
            { name: 'Bob', age: 31 },
            { name: 'Sam', age: 28 }
        ]}
        }
    }).mount('#app');
    </script>
</body>
</html>

Iterando sobre uma lista de objetos em Vue.js

Índices na Iteração

Com v-for, é possível capturar o índice do elemento atual durante a iteração. A sintaxe é:

v-for="(element, index) in array"

No exemplo abaixo, o índice é exibido ao lado do elemento:

<!DOCTYPE html>
<html>
<head>
    <title>Explorando Vue.js</title>
    <meta charset="utf-8" />
</head>
<body>
    <script src="https://unpkg.com/vue"></script>
    <div id="app">
    <ul>
        <li v-for="(user, index) in users">{{ index + 1 }}. {{ user }}</li>
    </ul>
    </div>
    <script>
    Vue.createApp({
        data() {
          return { users: ['Tom', 'Bob', 'Sam'] }
        }
    }).mount('#app');
    </script>
</body>
</html>

Acessando índices de elementos nos arrays em Vue.js

Iterando sobre Propriedades de Objetos

Além de arrays, a diretiva v-for permite iterar sobre as propriedades de um objeto:

v-for="(value, key) in obj"

No exemplo a seguir, as propriedades de um objeto são exibidas na página:

<!DOCTYPE html>
<html>
    <head>
        <title>Explorando Vue.js</title>
        <meta charset="utf-8" />
    </head>
    <body>
<script src="https://unpkg.com/vue"></script>
<div id="app">
    <ul>
        <p v-for="(value, key) in user">{{ key }}: {{ value }}</p>
    </ul>
</div>
<script>
    Vue.createApp({
      data() {
        return {
          user: {
            name: 'Tom',
            age: 22,
            language: 'JavaScript',
            framework: 'Vue.js',
          },
        };
      },
    }).mount('#app');
</script>
</body>
</html>

Iterando sobre propriedades de objetos com v-for em Vue.js

Uso de template

A diretiva v-for também pode ser usada com a tag template para renderizar múltiplos elementos sem a necessidade de um elemento pai:

<!DOCTYPE html>
<html>
<head>
  <title>Explorando Vue.js</title>
  <meta charset="utf-8" />
</head>
<body>
  <div id="app">
    <ul>
      <template v-for="user in users">
        <li>Nome: {{ user.name }}</li>
        <li>Idade: {{ user.age }}</li>
      </template>
    </ul>
  </div>
  <script src="https://unpkg.com/vue"></script>
  <script>
    Vue.createApp({
      data() {
        return { users: [
          { name: 'Tom', age: 22 },
          { name: 'Bob', age: 31 },
          { name: 'Sam', age: 28 }
        ]}
      }
    }).mount('#app');
  </script>
</body>
</html>

Iteração de Números

Além de arrays e objetos, a diretiva v-for também pode ser usada para iterar números:

<div>
  <span v-for="n in 10">{{ n }} </span>
</div>

Iterando sobre um intervalo de números com v-for em Vue.js

Neste caso, a iteração ocorre de 1 até 10.

v-for e v-if

Quando v-for e v-if são aplicados ao mesmo elemento, a diretiva v-if tem precedência. Isso significa que v-if não consegue acessar as variáveis definidas por v-for, o que pode causar erros. No exemplo abaixo, isso causa um erro:

<li v-for="user in users" v-if="user.age > 25">
  <p>Nome: {{ user.name }}</p>
  <p>Idade: {{ user.age }}</p>
</li>

Para corrigir essa situação, a diretiva v-for pode ser envolvida em um template:

<template v-for="user in users">
  <li v-if="user.age > 25">
    <p>Nome: {{ user.name }}</p>
    <p>Idade: {{ user.age }}</p>
  </li>
</template>

Isso garante que as variáveis definidas por v-for sejam acessíveis ao v-if.