5

Destructuring en v-for

Eduardo
eperedo
52278

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 1console.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><ulv-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><ulv-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!

Escribe tu comentario
+ 2
Ordenar por:
4
22727Puntos

No todos los heroes llevan capa.

Un millón de gracias, es tan obvio esto que no se me había pasado por la cabeza usar destructuring en un v-for o si quiera v-if, generalmente siempre uso mis propiedades así: user.name, user.email y similar.

Grandioso aporte. Gracias.

2
8451Puntos

Super útil! Buen aporte.

Ya se acabaron esos momentos en que me tocaba cambiar la variable de objeto en todos lados donde lo usaba.

Y parece mentira, pero Destructuring aumenta la poductividad significativamente.