Vue 7: Renderizado de listas con v-for
easy⏱ 5 mincoursevue
(item, index) in items
La forma básica es v-for="item in items". Cuando también necesitás la posición, la desestructurás como v-for="(item, index) in items" — index empieza en cero y se actualiza automáticamente a medida que el array cambia.
<li v-for="(todo, index) in todos" :key="todo.id">
{{ index + 1 }}. {{ todo.text }}
</li>
Usá siempre una :key estable
Usar el índice del array como :key se rompe en el momento en que la lista se reordena, se filtra, o se elimina un ítem del medio — Vue puede terminar reutilizando el estado interno del nodo del DOM equivocado (como el foco o el valor de un input) para el ítem equivocado, porque emparejó por posición en vez de por identidad. Usá siempre un id único real de tus datos en su lugar.
<!-- Risky: breaks if the list is ever reordered/filtered -->
<li v-for="(todo, index) in todos" :key="index">...</li>
<!-- Correct: a stable identity that travels with the data -->
<li v-for="todo in todos" :key="todo.id">...</li>
Construí la lista de tareas
En data(), agregá un array todos de objetos { id, text, done }. Renderizalos con v-for, con clave todo.id, dejá que un clic alterne done, y agregá un botón que agregue un nuevo todo.