No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Problemas de Reactividad

35/38
Recursos

Aportes 30

Preguntas 6

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥減roxies鈥 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, 鈥榩ropiedadNueva鈥, 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: 鈥淥btener 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 鈥渆nsancharse鈥 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=鈥渋sLoading鈥></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?