Renderização de Listas com a Diretiva v-for no Vue.js

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 com Vue.js

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.

Usando v-if com v-for em Vue.js

Documentação oficial:

List Rendering