Curso Avanzado de Vue.js 2

Toma las primeras clases gratis

COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE

Los que ya estamos familiarizados con Javascript sabemos como hacer destructuring de un objeto o arreglo:

var user = {
  id: 1,
  name: 'Eduardo'
}

var { id, name } = user;

console.log(id); // muestra 1
console.log(name); // muestra Eduardo

Lo que no sabía era que se podía usar el destructuring directamente dentro de la directiva v-for, primero veamos como normalmente usamos la directiva.

<template>
	<div>
	    <ul v-for="user in users" :key="user.id">
	      <li>{{user.name}}</li>
	    </ul>
	</div>
</template>

Nada nuevo, asumiendo que tenemos un arreglo users en nuestro data el código de arriba va a mostrar el nombre de todos los usuarios.
Ahora vamos con la versión de v-for usando destructuring:

<template>
  <div>
    <ul v-for="{id, name} in users" :key="id">
      <li>{{name}}</li>
    </ul>
  </div>
</template>

Y el resultado sería el mismo.

Usar destructuring en este caso puede ser útil si es que tienes un arreglo de objetos con muchas propiedades, pero solo mostrarás unos pocos en tu template puede llegar a facilitar la lectura del código ya que en el mismo v-for puedes saber qué propiedades están en uso.
Lo cual lleva a la recomendación de no usarlo si voy a usar muchas o todas las propiedades de mi objeto.

¡Saludos!

Curso Avanzado de Vue.js 2

Toma las primeras clases gratis

COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE

0 Comentarios

para escribir tu comentario

Artículos relacionados