Renderizar arrays en VueJS

La directiva v-for en Vue.js es una herramienta esencial que te permite renderizar listas de elementos dinámicamente. Si eres nuevo en Vue.js, esta guía te ayudará a entender cómo utilizar v-for.

¿Qué es la directiva v-for?

La directiva v-for se usa para iterar sobre una lista de datos y renderizar un elemento para cada ítem de la lista. Esto es útil para crear listas de elementos de manera dinámica, como listas de tareas, productos, usuarios, etc.

Ejemplo básico de v-for

Vamos a crear un componente llamado ItemList.vue que muestra una lista de elementos usando v-for.

Paso a Paso

Crear el archivo ItemList.vue:

Primero, crea un nuevo archivo ItemList.vue en tu proyecto Vue.

<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script setup>
import { ref } from 'vue'

// Definimos nuestra lista de elementos
const items = ref([
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' }
])
</script>

<style scoped>
ul {
  list-style-type: none;
  padding: 0;
}

li {
  padding: 10px;
  background: #f0f0f0;
  margin-bottom: 5px;
}
</style>

Te explico que hace cada parte del componente:

Template

En la sección de template, utilizamos v-for para iterar sobre la lista items y renderizar cada item dentro de un elemento <li>. La directiva :key es importante para ayudar a Vue a identificar de manera eficiente cada elemento en la lista.

<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

Script

En la sección de script, utilizamos setup para definir nuestros datos reactivamente con ref. Esto hace que items sea una referencia reactiva que Vue puede rastrear y actualizar automáticamente cuando cambian los datos.

<script setup>
import { ref } from 'vue'

// Definimos nuestra lista de elementos
const items = ref([
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' }
])
</script>

Style

Los estilos están encapsulados usando scoped, lo que significa que solo se aplicarán a este componente específico. Esto ayuda a evitar conflictos de estilo con otros componentes.

<style scoped>
ul {
  list-style-type: none;
  padding: 0;
}

li {
  padding: 10px;
  background: #f0f0f0;
  margin-bottom: 5px;
}
</style>