Renderizado de listas en Vue.js

Author
By Darío Rivera
Posted on 2020-07-01 in Vue.js

Hace algunos días vimos el rederizado condicional en Vue.js con la directiva v-if. El día de hoy veremos otra directiva muy útil en cuanto al renderizado de listas HTML y es la directiva v-for. Esta directiva permite iterar un array o un objeto para mostrar cada una de sus características.

Directiva v-for

Para utilizar la directiva v-for basta utilizar la siguiente sintaxis en los atributos de un elemento HTML.

v-for="item in items"

En donde items será un array u objeto e item el valor de cada uno de sus elementos.

Iteración sobre Arrays

Supongamos que tenemos un array de monedas y un array de países y queremos listarlos en el HTML. Lo primero que debemos tener en cuenta es la definición de dichos arrays como te muestro a continuación.

var vue = new Vue({
  el: "#app",
  data: {
    currencies: ["USD", "COP", "AUD"],
    countries: ["USA", "COL", "AUS"]
  }
});

La siguiente tarea será iterar sobre estos arrays mediante la directiva  v-for en el html.

<div id="app">
  <ul>
    <li v-for="currency in currencies">
      {{ '\{\{ currency \}\}' }}
    </li>
  </ul>
  <ul>
    <li v-for="(country, index) in countries">
      {{ '\{\{ index + \' - \' + country \}\}' }}
    </li>
  </ul>
</div>

Nota que en el segundo caso hemos iterado de una forma alternativa para obtener el índice del array.

v-for="(value, index) in array"

Observa el ejemplo en funcionamiento en el siguiente ejemplo de CodePen.


Iteración sobre Objetos

La iteración con objetos es muy similar a la iteración con arrays exceptuando algunas leves diferencias. Supongamos que queremos mostrar las skills de un usuario y algunos de sus datos básicos. Vemos la definición de datos.

var vue = new Vue({
  el: "#app",
  data: {
    skills: {
      backend: "PHP",
      backendFramework: "Laravel",
    },
    user: {
      name: "Steave",
      position: "Web Developer",
    }
  }
});

Como en el ejemplo anterior la siguiente tarea será utilizar la directiva v-for en el HTML.

<div id="app">
  <h3>Skills</h3>
  <ul>
    <li v-for="skill in skills">
      {{ '\{\{ skill \}\}' }}
    </li>
  </ul>
  <h3>Info</h3>
  <div v-for="(value, name) in user">
    <strong>{{ '\{\{ name \}\}' }}</strong>: {{ '\{\{ value \}\}' }}
  </div>
</div>

Nota que en el segundo ejemplo hemos iterado de tal forma que podamos obtener el nombre de la propiedad y su respectivo valor en el objeto. También es posible acceder a la key cambiando un poco la sintaxis así.

v-for="(value, name, index) in object"

Veamos el ejemplo en funcionamiento desde CodePen.



Si te ha gustado este artículo puedes invitarme a tomar una taza de café

Acerca de Darío Rivera

Author

Ingeniero de desarrollo en PlacetoPay , Medellín. Darío ha trabajado por más de 6 años en lenguajes de programación web especialmente en PHP. Creador del microframework DronePHP basado en Zend y Laravel.

Sólo aquellos que han alcanzado el éxito saben que siempre estuvo a un paso del momento en que pensaron renunciar.