En la lección de hoy veremos cómo funciona la directiva v-for de Vue.js para recorrer un array u objeto y de esta manera poder operar con cada uno de los items que contiene dicho array u objeto, de la misma forma como lo haríamos con un bloque foreach() en PHP.

Repositorio

Ver el código de esta lección en GitHub

Notas

  • Ten presente siempre que en PHP cuando se itera un array se hace con la estructura variable-a-iterar as alias-de-elemento-singular :

    pero con Vue.js es lo contrario, primero se coloca el elemento singular y luego el plural:
  • Si la variable a iterar es un array con strings o cadenas de texto, el alias va a contener el valor de cada elemento del array.
  • Puedes usar la variable especial $index para trabajar con el índice del elemento actual.
  • Cuando la variable a iterar es un objeto de JavaScript que contiene propiedades, como por ejemplo: notes que tiene la propiedad text y author se muestran en Vue.js:

Actividad

Realiza la mejora al ejemplo que hemos venido trabajando para agregar:

  • Que el programador pueda agregar todas las tecnologías que quiera y colocar sus años de experiencias.
  • Que le campo autor sea dinámico.
  • Que las notas se puedan marcar como favoritas con estilos que la resalte del resto.

Material relacionado

Lección anterior Introducción a los componente en Vue.js Lección siguiente Computed Properties en Vue.js