VueJS

Vue: eliminar referencias de arreglos

En posts anteriores mostré la manera de eliminar las referencias de arreglos en JavaScript usando slice o el operador de propagación. Sin embargo, con el framework Vue las cosas son un poco distintas debido a su reactividad.

Hoy te mostraré cómo eliminar la referencia de un arreglo en Vue o, en otras palabras, cómo realizar una copia de un arreglo en Vue.

Este error me dio bastantes dolores de cabeza, y siempre me los ha dado. Al fin encontré la solución y vengo a compartirla.

Eliminar referencia de arreglo con Vue

Vamos a hacer esto rápido. En ocasiones te puede funcionar slice o el operador de propagación, pero lo que a mí realmente me funcionó fue codificar y decodificar el arreglo con JSON.

let arregloSinReferencia = JSON.parse(JSON.stringify(arreglo));

Así como lo escuchas: codificamos el arreglo en JSON, y luego lo decodificamos. Al hacer esto, obtendremos una copia del arreglo sin referencias.

Nota: este método es lento, es decir, solo deberías usarlo en casos especiales o cuando los otros no funcionen.

Mi problema específico

En un proyecto que estoy desarrollando necesito agregar un arreglo a determinado objeto. Algo así:

return BultosDeCortesService.obtenerBultosDeCorte(this.corteSeleccionado.id)
.then((bultos) => {
  this.operaciones.forEach((operacion, indiceOperacion) => {
    // Agregamos "bultos" a cada operación.
    this.$set(this.operaciones[indiceOperacion], 'bultos', bultos);
  }
}

Como lo ves en la línea 5 estoy asignando el arreglo a cada operación. Cada bulto tiene una persona que está trabajando sobre el mismo, pero como se mantienen las referencias, se muestra el mismo nombre en toda la columna:

Filas iguales, manteniendo referencias

Cuando en realidad debería mostrarse únicamente en la celda, y debería ser distinto. Así que al aplicar el truco que expongo, se ve así:

Valores distintos en cada celda

Esta es la única manera en la que me funcionó; no encontré otra. De igual modo no tiene tanto impacto en la aplicación web puesto que solamente se hace en una ocasión, y no en cada momento que se refresca la vista.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Entradas recientes

Cancelar trabajo de impresión con C++

En este post te quiero compartir un código de C++ para listar y cancelar trabajos…

4 semanas hace

Copiar bytes de Golang a JavaScript con WebAssembly

Gracias a WebAssembly podemos ejecutar código de otros lenguajes de programación desde el navegador web…

2 meses hace

Imprimir PDF con Ghostscript en Windows de manera programada

Revisando y buscando maneras de imprimir un PDF desde la línea de comandos me encontré…

2 meses hace

Hacer pruebas en impresora térmica Bluetooth Android

Esta semana estuve recreando la API del plugin para impresoras térmicas en Android (HTTP a…

2 meses hace

Limpiar clave PEM

Hoy te enseñaré a extraer la cadena base64 de una clave PEM usando una función…

2 meses hace

Foco con Telegram, apagador de 3 vías, relevador y ESP8266

Encender un foco con un Bot de Telegram es posible usando una tarjeta como la…

2 meses hace