🔄 Exemplo 07 - x-for Iteração em Listas

1. x-for Simples com Array

Frutas:

x-for deve estar dentro de um <template> quando envolve um elemento

2. x-for com Índice

Cores numeradas:

Acesse o índice com (item, index) in array

3. x-for Iterando Objetos

Dados da Pessoa:

Use (valor, chave) para iterar sobre propriedades de um objeto

4. x-for com Array de Objetos

Produtos:

Acesse propriedades com ponto: produto.nome, produto.preco

5. x-for com Range Numérico

Números de 1 a 10:

x-for="item in 5" cria um range de 1 a 5

6. x-for Dinâmico (Adicionar e Remover)

Tarefas ():

x-for atualiza automaticamente quando o array muda

7. Importância do :key

✅ Correto: :key="item.id" - Use IDs únicos

❌ Evite: :key="index" - Pode causar bugs quando reordenar

Exemplo com :key correta:

A chave :key identifica únicamente cada elemento para Alpine otimizar atualizações

8. x-for com Filtros

Usuários :

Combine x-for com getters computados para filtros dinâmicos