Manejo de Problemas de Reactividad en Vue.js

Clase 35 de 38 • Curso Básico de Vue.js 2

Resumen

¿Cómo solucionar problemas de reactividad en Vue.js?

Trabajar con bibliotecas modernas de JavaScript como Vue.js puede ser apasionante, pero también plantea ciertos retos, especialmente cuando nos enfrentamos a problemas de reactividad. En esta guía, exploraremos cómo Vue maneja la reactividad y cómo podemos solucionar inconvenientes comunes que surgen al manipular objetos y arrays.

¿Cómo manejar la reactividad en Vue.js?

La reactividad es el pilar de Vue.js. Permite que la interfaz de usuario (UI) se actualice automáticamente cuando los datos cambian. Sin embargo, Vue solo puede hacer un seguimiento de las propiedades que están presentes al crear el objeto o array.

Seguimiento de propiedades: Para que Vue haga un seguimiento de los cambios en los objetos, todas las propiedades deben estar definidas en el momento de su creación.
Uso de Vue.set: Si necesita agregar una propiedad a un objeto después de su creación, Vue ofrece Vue.set para asegurar que las nuevas propiedades sean reactivas.

Vue.set(obj, 'nuevaPropiedad', valor);

¿Cómo integrar la API con Vue.js?

Integrar una API en un proyecto Vue.js puede parecer complicado, pero con los métodos asíncronos adecuados, puede simplificarse significativamente.

Métodos para la API: Desarrollar métodos que realicen llamadas a la API y procesen los resultados es crucial. Por ejemplo, para obtener una lista de mercados financieros:
```
obtenerMercados(moneda) {
  return fetch(`https://api.tuapi.com/markets?currency=${moneda}`)
    .then(response => response.json());
}
```
Manejo de resultados: Es esencial manejar adecuadamente la promesa devuelta por fetch para integrar los resultados en su componente Vue.

¿Cómo mostrar resultados en una tabla?

Una vez que se haya obtenido la información de la API, mostrar estos datos en una tabla enriquecerá su aplicación, proporcionando detalles precisos a los usuarios.

Directiva v-for: Utilizar v-for en Vue.js para iterar y mostrar los datos de manera ordenada.

<tr v-for="mercado in mercados" :key="mercado.id">
  <td>{{ mercado.nombre }}</td>
  <td>{{ mercado.cotización }}</td>
</tr>

Filtros para formato: Aplicar filtros para formatear datos como cifras monetarias puede mejorar la legibilidad.

¿Cómo resolver problemas de reactividad al modificar objetos y arrays?

Uno de los mayores desafíos al trabajar con Vue.js es gestionar cambios en datos que dinámicamente alteran la estructura de objetos y arrays.

Problemas al añadir propiedades: Vue no detecta automáticamente la adición de nuevas propiedades en los objetos ya existentes. Aquí es donde Vue.set resulta esencial.

Actualizar propiedades con Vue.set:

// Añadir una URL a un objeto mercado
Vue.set(mercado, 'url', nuevaUrl);

Uso del watcher: Las funciones watcher pueden ser útiles para observar cambios específicos en las variables y disparar acciones en respuesta.

¿Cómo mejorar la experiencia del usuario con carga dinámica?

La interacción dinámica y fluida con el usuario es crucial, especialmente al realizar operaciones asincrónicas que pueden tomar tiempo.

Indicadores de carga: Implementar spinners o loaders para indicar que una operación está en curso mejora la experiencia del usuario.
Mostrar resultados dinámicamente: Cambiar el estado visible de botones o enlaces según la disponibilidad de datos garantiza que el usuario interactúe con contenido actualizado.

<spinner v-if="cargando"></spinner>
<button v-else @click="obtenerDatos">Obtener Datos</button>

El uso estratégico de estas técnicas mejora la capacidad de respuesta de las aplicaciones Vue.js, ofreciendo a los usuarios una mejor experiencia y a los desarrolladores una solución clara a los problemas de reactividad. Estos consejos aseguran que su aplicación funcione sin contratiempos y sea receptiva a las interacciones del usuario. ¡Mantenga siempre su entusiasmo por el aprendizaje y siga explorando nuevos desafíos en el desarrollo frontend!

Andrés Felipe Rodríguez Rincón

student•

Les dejo la tabla vacía para que no se líen buscandola:

<h3 class="text-xl my-10">Mejores Ofertas de Cambio</h3>
      <table>
        <tr class="border-b">
          <td>
            <b></b>
          </td>
          <td></td>
          <td></td>
          <td>
            <px-button />
            <a class="hover:underline text-green-600" target="_blanck"></a>
          </td>
        </tr>
      </table>

Daniel Isidro Duran

student•

thanks

Andrés Campuzano Garzón

student•

thanks man

Freddy Alexandro Gamboa Velasco

student•

El problema de reactividad se origina por que vue no puede detectar si una propiedad existe debido a que fue agregada después que el objeto se creo y esta propiedad no esta siendo rastreada por vue. Para solucionarlo: this.$set(this.someObject, 'propiedadNueva', valor)

Sergio Iván Urbina Rodríguez

student•

Excelente síntesis

Ameth Ordoñez Erazo

student•

Aunque ya no es necesario, ya Vue si lo detecta

Mariangelica Useche

Team Platzi•

Para los que prefieran async/await

const getMarkets = async coin => {
  let res = await fetch(`${url}/assets/${coin}/markets?limit=5`);
  res = await res.json();
  return res.data;
};

const getExchange = async id => {
  let res = await fetch(`${url}/exchanges/${id}`);
  res = await res.json();

  return res.data;
};

Federico Walovnik

student•

Estas dos funciones, a mi parecer, se pueden mejorar utilizando un try catch para preveer problemas si no funciona el request:

const getMarkets = async coin => {
  try {
    let res = await fetch(`${baseUrl}/assets/${coin}/markets?limit=5`);
    res = await res.json();
    return res.data;
  } catch (error) {
    console.error("Error en el request");
  }
};

const getExchange = async id => {
  try {
    let res = await fetch(`${baseUrl}/exchanges/${id}`);
    res = await res.json();
    return res.data;
  } catch (error) {
    console.error("Error en el request");
  }
};

Mariangelica Useche

Team Platzi•

Tienes razón, Fede. Gracias!

jonathan sanchez

student•

Para solucionar los problemas de reactividad, vue nos ofrece el metodo $set().

Daniel Morales

student•

un pequeño aporte, en el PxButton, el slot debe definirse asi:

<slot v-if="!isLoading"></slot>

ya que no podemos usar v-show al slot no ser un elemento real del DOM.

Sino nos muestra el loader, y el texto a la vez

Javier Silva Avendaño

student•

No sé si es error mío, pero en el slot debajo de beat-loader, creo que el profe se equivocó. Él textualmente dice: Y cuando isLoading sea false, vamos a mostrar el slot y escribe lo siguiente:

<slot v-show="isLoading"></slot>

Por alguna razón v-show, no funciona, se sigue mostrando la palabra: "Obtener link" cuando carga el loader. Si se cambia la condición por:

<slot v-show="!isLoading"></slot>

No pasará absolutamente nada, no se muestra ningún cambio.

Pero si agregan un v-if, desaparecerá el slot con la condición que escribió el profe, haciendo inútil el botón:

<slot v-if="isLoading"></slot>

Entonces la forma de hacer que funcione correctamente y siguiendo las palabras del profe, la condición correcta es:

<slot v-if="!isLoading"></slot>

Así se darán cuenta que; cuando uno presiona el botón, desaparece el slot y aparece solamente el loader cargando para finalmente quitarse cuando carga el link, la cual creo, es la intención original, les dejó el aporte, inténtenlo si gustan y agradeceré sus observaciones.

Daniel Parra

student•

Asi es. No entiendo como le funciono al profesor esta parte. En un hilo en github alguien preguntaba porque no servia el v-show en <slot/> y el creador del mismo framework respondio diciendo que "slot no es un elemento real" y por lo tanto lo que se debia usar era un v-if.

https://github.com/vuejs/vue/issues/5219

Bruno Reyes

student•

Con VUEX ya no existiria este problema

albert villarroel

student•

les dejo la url pa la people xD

${url}/assets/${coin}/markets?limit=5

Pablo Yafac

student•

Problema de reactividad se da en objetos y arrays en Vue, cuando no puede detectar que una propiedad existe, por que fue agregada despues que el objeto ha sido cread. Para solucionarlo usamos $set(objeto, propiedad, valor) . En este caso this.$set(exchange, 'url', res.excangeUrl)

Daniel Moreno

student•

El v-show en el slot de pxbutton no me está funcionando, no cambia la vista.

Intenté cambiandolo a v-if y ahora si se esconde el texto al darle click al boton mientras se observa el loader.

No se si de esta manera es correcto o que pasa

Manuel Ojeda

student•

¿Puedes enseñarme un poco de tu código? Para que veamos juntos que detalle cuentas.

Javier Silva Avendaño

student•

Me pasa lo mismo, agregué un v-if y se muestra cuando isLoadig es false es decir de esta forma:

v-if="!isLoading"

Y no como lo escribió el profe.

v-if="isLoading"

Renato Alvarez Velasquez

student•

Estoy teniendo un problema similar pero en mi caso si tengo declarado un array tanto en el data como atributo de clase y no me actualiza .

Guillermo Cortez

student•

Hola como estas renatorjav. Podrías mostrar tu código de api.js?

Alexis Mora Sanchez

student•

Hola, tengo un problema sobre el proyecto y no se que es lo que podria ser, asique dejo la duda por aqui: Resulta que la pagina ha decidido "ensancharse" un poco hacia la derecha, os dejo una imagen

Alguien sabria como arreglarlo? Gracias

Jose Morales Varon

student•

Por más que reviso nada de esta clase o la pasada me sirve. De hecho lo que hace es llenarme aún más la consola del navegador de errores. Supongo que por el cambio de Vue 2 a Vue 3. Lo que hace es retrasar aún más la carrera de aprendizaje.

Jefferson Andres Espejo Goez

student•

Caballero pero si el curso dice explicitamente que es de Vue 2. Lo recomendable es que lo hagas en Vue 2 y después con los conceptos aprendidos y la ayuda de la documentación lo pases a Vue 3

Carlos Rosado

student•

const getMarkets = async coin => {
    return fetch(`${API}/${coin}/markets?limit=5`)
    .then(res => res.json())
    .then(res => res.data)
  };
  
const getExchange = async id => {
    return fetch(`${API}/exchanges/${id}`)
    .then(res => res.json())
    .then(res => res.data)
};

Javier Silva Avendaño

student•

Tengo la solucion para los que la tabla de: Mejores ofertas de cambio se les hizo chiquita y no ocupa todo el ancho de la pantalla, solo agreguen esta clase en ++<table>++

class="w-full"

Diego Camino Reinoso

student•

this.$set(objecto, nombre_propiedad, valor) soluciona problemas de reactividad con Vue

Wiliams Ixcoy

student•

cada vez que presiono un boton me da este error, agradeceria que alguien me pudiera ayudar

Access to fetch at url(url a coincap exchange binance) from origin url(localhost)' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Héctor Eduardo López Carballo

student•

Hola!

Parece que la url que estás utilizando tiene bloqueados los requests desde otros servidores, de dónde sacaste esa url?

Verónica

student•

Tengo el mismo error, no he encontrado solución A veces parece funcionar y ya luego deja de hacerlo.

El error La respuesta de estos requests es 429 Too Many Requests, creo que podría tener algo que ver pero de igual modo no encuentro cómo solucionarlo.