Mejorar proyecto: links y conversión

HTML:

<router-link class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4" ></router-link>

Data:

links: [
        {
          title: 'BTC',
          to: { name: 'coin-detail', params: { id: 'bitcoin' } }
        },
        {
          title: 'ETH',
          to: { name: 'coin-detail', params: { id: 'ethereum' } }
        },
        {
          title: 'XRP',
          to: { name: 'coin-detail', params: { id: 'ripple' } }
        }
      ]```

Bueno, yo vine buscando cobre y me voy con ORO, encima con un súper proyecto de portafolio, no puedo creerlo, y eso que es el curso BÁSICO de VUE.

Nacho te amo ❤️ SOS GRANDE!

Este curso dio mas de lo que esperaba. Excelente profesor, excelentes clases, material de apoyo para cada clase y explicación de como instalarlo, un poco de UX y mucho mas.
Muchas gracias

La API cambió el nombre de ripple por xrp, aspi que cuando seleccionen XRP no les va a servir, lo unico que tienen que hacer es cambiar dentro de links en el objeto de xrp, en donde dice params, hay que cambiar “ripple” por “xrp” y funcionará de nuevo.

Les cuento que a mi no me funcionó la actualización de coin-detail con los watchers y tenía todo igual que en el video. A pesar de que si estaba cambiando la variable $route el watcher no me reconocía el cambio, entonces fuí a leer la documentación y encontré esta función beforeRouteUpdate

Mi código quedó así, esto lo puse después del hook created():

  beforeRouteUpdate(to, from, next) {
    next()
    this.getCoin()
  },

Al parecer cambiaron el id del ripple en la API y da un error cuando intentas traer la información.
Para solucionarlo solo cambien el id por XRP en el array de links

{
          title: "XRP",
          to: { name: "coin-detail", params: { id: "xrp" } },
}

Me fascino el curso. Eres el mejor. Grandeeee.

Tuve muchos errores durante el curso pero bueno asi se aprende mas

Tailwind sigue siendo una caja negra para mi. Por Vue me siento genial y quiero seguir aprendiendo.
Muchas gracias Nacho!!

En vue 3, a mi me funciono de la siguiente manera:

Lo agregue en coinDetail.vue

created() {
    this.$watch(
      () => this.$route.params,
      (toParams, previousParams) => {
        this.getCoin();
      }
    )
  },

Les dejo el repositorio de github de mi proyecto ya finalizados en las dos versiones de Vue :

Vue2.
https://github.com/castellanosfelipe/Felipe-Exchange-vue2.git[]

Vue3.
https://github.com/castellanosfelipe/Felipe-Exchange-vue3.git[]

Espero les sirva y me regalen una estrella en github 😃

De verdad muchas gracias, que curso tan genial VUE FTW!!

En caso no les cargue el tercer link(XRP) es por que el id es distinto debe ser id:‘xrp’

Muy bueno el curso por momentos me embomba la cabeza pero no es nada que no se pueda aprender

ACTUALIZACIONES EN VIVO DE PRECIOS SIN REFRESCAR LA PÁGINA

En Home.vue

1. Declarar la variable interval en data()
2. Declarar en methods el fetch a la api que con setInterval.
   Yo lo hice con async await pero con promises sería lo mismo nada más que repiten el fetch a la API dentro setInterval().
3. Limpiar el setInterval() con el hook beforeDestroy(). Esto evita memory leaks, es decir que si cambiamos a otra vista (ej: coin-detail) va a seguir llamando a la api de la anterior vista sucesivamente y no queremos que esto suceda.

Saludos!!

WAO!!!

Genialisimo, ya tengo la primera app de Vue hecha uno para aprender!.

Mil gracias profesor

La verdad que este curso me ha volado la cabeza pero logré entender todo! Me sorprende bastante la lógica con la que resuelve las necesidades del proyecto y Vue se presta para ayudarte en lo que necesitas. Gracias Nacho por compartir tus conocimientos!!!

Recuerden amigos que en este momento historico el bitcoin esta en 54.931 😱

Seria bueno que en el link que se muestra en coin detail cuando se cambia por el boton cuando se click agregaran

:href="m.url"

 <div class="flex flex-row my-5">
            <label class="w-full" for="convertValue">
              <input
              v-model="convertValue"
                id="convertValue"
                type="number"
                class="text-center bg-white focus:outline-none focus:shadow-outline border border-gray-300 rounded-lg py-2 px-4 block w-full appearance-none leading-normal"
                :placeholder="`Valor en ${fromUsd ? 'USD' : asset.symbol}`"
              />
            </label>
          </div>
          <span class="text-xl">{{ convertResult }} {{ fromUsd ? asset.symbol : 'USD'}}</span>

Muchas gracias Nacho

Muchas gracias excelente curso, explicas muy bien cada punto a tratar.

De verdad que este curso me ha servido demasiado!! Espera aprender solo de Vue y salí aprendiendo hasta cómo consumir una API, muchas gracias por este curso.

Muy interesante el curso, aprendí mucho

Increible Curso. La verdad si quede impresionado porque al ser un curso “Basico” de Vue2 imagine algo mas sencillo sobre las funcionalidades principales del framework . Hoy 18/04/2023 doy mi mas profundo agradecimiento al Nacho Anaya primero ; Gran instructor , totalmente capacitado para la labor y segundo : la verdad quede sorprendido con el proyecto . No me lo imaginaba de esta altura . Mil felicitaciones profe y gracias por impartir el conocimiento. Un abrazo desde Medellin!!!

A mi el watch por si solo no me funcionó, tuve que utilizar una función que se llama cuando cambia la ruta, según dice la documentación de Vue. Así me quedo el código:

beforeRouteUpdate(to, from) {
    // console.log('From', from.params)
    // console.log('To', to.params)
    this.getCoin()
  },

  watch: {
    $route() {
      this.getCoin()
    }
  },

Asi personalice mi proyecto, espero les guste y le den me gusta :v

Que increible proyecto! 😄

Para el que recibe el error por el toLowerCase utilicen otro metodo que hace lo mismo proporcionado por js llamado toLocalLowerCase basado en la configuracion del lenguaje local de tu navegador segun la documentacion oficial

buen curso me doy cuenta que han cambiado muchas cosas pero excelente me dio algunos problemas pero calidad, aprendí muchas cosas maratón de Vue

Algo que hice agregue fue un botón de favorito en la tabla y que los favoritos marcados sean los que se agregan en el head, gracias a un bus de Vue

Les dejo el repositorio de github.

Vue2.
https://github.com/castellanosfelipe/Felipe-Exchange-vue2.git[]

Vue3.
https://github.com/castellanosfelipe/Felipe-Exchange-vue3.git[]

Espero les sirva y me regalen una estrella en github 😃

Ignacio esta increíble tu forma de enseñar, haces entender estos temas super rápido y sencillo.

Gracias. tu curso esta a otro nivel

Si les da menos el precio del bitcoin cuando ponen 8400 no es por un typo, es por la bajada del precio del bitcoin de los úlitmos dias 🚀

Gracias 😃 excelente curso, encantado

Excelente curso, yo llevaba mas de 5 años de no tocar desarrollo web y veo que las cosas han evolucionado demasiado.

Nacho es una crack!!!

Un problema común al trabajar con vue-router y páginas dinámicas, cuando cambia el parámetro y se mantiene dentro de la misma vista el componente no se vuelve a crear desde cero, y no se refresca el contenido; para resolver este problema, es necesario utilizar un “watch”

El menu dinamico me sale en otra fila!!!

Hoy en día el Bitcoin está 13690 usd 😄

Les recomiendo mucho agregar la clase outline-none en el boton de obtener link cambia un poco el efecto del click

Waoo este curso me volo la cabeza, de basico solo tiene el nombre increible poder ver tantas cosas en un solo curso y poder ganar confianza al momento de usar vue, gracias Ignacio por este super curso

Nacho sos, sin temor a equivocarme, el mejor profe de Platzi!! Excelente el contenido, no dejaste nada sin explicar, me encanto el curso, y Vue!! gracias totales!

me dicuenta que no es riple en en to de la App.vue es xrp el Id…de lo contrario el loading no carga nada

Muy buen curso muchas gracias Nacho por compartir tu maravilloso conocimiento.

Me sale el siguiente error: [](

Al día de hoy el Bitcoin está 13.692 usd jujuuuuuu 😄