Paga en 4 cuotas sin intereses de $52.25

Antes:$249

Currency
$209

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscríbete

Termina en:

17d

04h

57m

58s

5

Destructuring en v-for

Eduardo
eperedo
66600

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
22819Puntos
5 años

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
17569Puntos
4 años

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.