Problemas de Reactividad

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

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.

Con VUEX ya no existiria este problema

les dejo la url pa la people xD

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

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

Buscar solucion a array market para poder llenarlo desde la api

con Vue 3 este problema no existe

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

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?

https://imgur.com/dyTyESN

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?