No tienes acceso a esta clase

¬°Contin√ļa aprendiendo! √önete y comienza a potenciar tu carrera

Problemas de Reactividad

35/38
Recursos

Aportes 28

Preguntas 6

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

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>

VUE 3 YA NO TIENE PROBLEMAS DE REACTIVIDAD

En Vue 3 la funci√≥n this.$set ya no existe, en Vue 3 el sistema de reactividad est√° basado en ‚Äúproxies‚ÄĚ as√≠ que ahora Vue es capaz de detectar la adicion de nuevas propiedades a los objetos y arrays, por lo que hacerlo de la primera forma funcionar√° sin problemas.

Pueden ver más aquí

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)

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;
};

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

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

Con VUEX ya no existiria este problema

les dejo la url pa la people xD

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

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.

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)

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

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.

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)
};

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"

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

Tengpo una duda al crear el hook del evento que trae los markets y revisar la docu me trae todos los parametro necesarios para generarme la url dentro del objeto markets, pero no me lo genera ni lo inserta pense que podia ser error de sintaxis pero no tengo ninguno que podra ser???

Uso de this.$set en Vue2

Al crear una nueva propiedad con $set, no hay necesidad de actualizar nuevamente el valor con $set, ya de por si, cuando lo creas, es reactivo, solo bastaba actualizarlo con asignación.

No entiendo por qu√© el <slot v-show=‚ÄúisLoading‚ÄĚ></slot> del PxButton aparece incluso si la propiedad isLoading se inicializa con false. Alguien sabe?

getWebSite(e){
      this.$set(e, 'isLoading', true)
      api.getExchange(e.exchangeId)
      .then(res => {
        this.$set(e, 'url', res.exchangeUrl)
      })
      .finally(() => {
        this.$set(e, 'isLoading', false)
      })
    }
<h1>Aporte - loading button</h1>

La directiva v-show no funciona en el elemento slot ya que es un elemento abstracto, para poder ocultar el texto cuando el botón está cargando es necesario encerrarlo en un contenedor, como un div, y este tendrá la directiva de v-show.

<template>
  <button
    @click="$emit('click')"
    class="bg-transparent
    hover:bg-green-500
    text-green-700
    font-semibold
    hover:text-white
    py-2 px-2 border border-green-500 hover:border-transparent rounded"
  >
    <beat-loader
      v-show="loading"
      :loading="loading"
      color="#68d391"
      :size="8"
    />
    <div v-show="!loading">
      <slot />
    </div>
  </button>
</template>

<script>
export default {
  name: 'PxButton',
  props: {
    loading: {
      type: Boolean,
      default: false,
    },
  },
};
</script>

No podemos usar algo así como una interfaz de oop sobre el json de markets para que desde el principio sepa cuales son las propiedades que va a tener?

Y ahora que? no consigo solucionar este problema, esperemos por el profe

Lo bueno de esta clase esta a lo ultimo!!!

Pueden agregar

v-if="!m.isLoading"

al slot para que se quite el texto y solo se vea el loader cuando le den click.

<h3 class="text-xl my-10">Mejores Ofertas de Cambio</h3>
      <table>
        <tr v-for="m in markets" :key="`${m.exchangeId}-${m.priceUsd}`" class="border-b">
          <td>
            <b>{{ m.exchangeId }}</b>
          </td>
          <td>{{ m.priceUsd | dollar }}</td>
          <td>{{ m.baseSymbol }} / {{ m.quoteSymbol }}</td>
          <td>
            <Button v-if="!m.url"
              @onclick="getWebSite(m)"
              :isLoading="m.isLoading || false"
             >
             Link
             </Button>
            <a v-else class="hover:underline text-green-600" target="_blanck">{{m.url}}</a>
          </td>
        </tr>
      </table>

Tengo la sensaci√≥n de que me la voy a pasar renegando con los problemas de reactividad constantemente, ¬Ņ a alguien m√°s le pasa?