chorro de clases del botón Detalle:
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
Introducción
Qué aprenderás sobre Vue.js 2
El Framework Progresivo
¡Hola Vue!
Rendering Declarativo y Manipulación de DOM
Introducción al Rendering Declarativo
Expresiones y Propiedades
Atributos Dinámicos
Control de Flujo con Directivas
Renderizado de Listas
Manejo de Eventos
Clases en tiempo real
Estilos en tiempo real
Computed Properties y Watchers
Two-Way Data Binding
Ejercicios de práctica módulo 2
Sistema de Componentes
Sistema de Componentes
Crear Componentes Custom
Comunicación entre Componentes: propiedades
Comunicación entre Componentes: eventos
Slots
Ciclo de Vida y Hooks
Antes de continuar, ¡un repaso!
Ejercicios de práctica
Ambiente de Desarrollo
VS Code + Vetur / Chrome / Firefox + Dev Tools
Qué es, cómo usarlo y aplicaciones profesionales con el CLI
Single File Components
Funcionalidades, UI y comandos básicos
Platzi Exchange
Introducción y Setup de Tailwind CSS
Primeros Componentes
Introducción y Setup de Vue Router
Introducción a Fetch y API de Coincap
Mejorar la UI con filtros
Rutas dinámicas
Navegación Programática
Utilizar componentes de terceros
Problemas de Reactividad
Mejorar proyecto: filtros y ordenar
Mejorar proyecto: links y conversión
¡A producción!
Despliegue de la app a Netlify
Rendering Declarativo y Manipulacion de DOM
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 19
Preguntas 11
chorro de clases del botón Detalle:
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
Pero fuera de bromas: ¿Está mal la alternativa que usé mientras me adelantaba a ti?
v-on == @
v-bind == :
Como sabran vengo haciendo una versión adaptada en bootstrap, voy pasando mis resultados.
Navegación Programática:
this.$router.push({name: component, params:valueId})
shorthand: “v-on:” por “@”
Hay alguna diferencia entre las 2 maneras de hacer las rutas?
router-link vs $router.push ?
En los personal me gusta mas poner el link directamente en el botón, siento que esto del this.$router.push() es más para hacer redirecciones desde el código xD Algo así como un document.location.href
Si this
te aparece como undefined
y no puedes usar this.$router
, puede ser que estes usando un arrow function en lugar de una función normal.
Don’t use arrow functions on an options property or callback, such as created: () => console.log(this.a) or vm.$watch(‘a’, newValue => this.myMethod()). Since an arrow function doesn’t have a this, this will be treated as any other variable and lexically looked up through parent scopes until found, often resulting in errors such as Uncaught TypeError: Cannot read property of undefined or Uncaught TypeError: this.myMethod is not a function.
Me costo mucho entender que hacia mal, espero que le sirva a alguien. ;D
Creo que es mejor usar elementos nativos como el anchor, cuando queremos cambiar de rutas en la app. Ya que de esa manera ayuda al SEO y a los motores de búsqueda a detectar los links disponibles en nuestra web.
En resumen, creo que es mejor usar <router-link to="… en vez de <button @click=“goToSomeRoute” 🤔
Alguien podria aclararme cual es la diferencia entre “$route” y “$router”? Es decir, a que estan haciendo referencia cada uno?
Aunque esta opción de:
parece mucho esfuerzo para un simple redirección, te da ideas para más adelante hacer cosas personalizadas. Por ejemplo si quisieras guardar algunas estadísticas o enviar otra información paralela a otro lugar.
y si se hace de esta manera que ventajas o deficiencias habria?
<router-link :to="coin/${a.id}
">
Saben por qué cuando creo un repositorio local con git no sirve el servidor CLI? Cada vez que guardo un cambio debo volver a correr el comando npm run serve.
Logré hacer que muestre la información de las criptomonedas.
Primero, creamos un archivo vue.config.js:
module.exports = {
devServer: {
proxy: "https://api.coincap.io/v2/assets/",
},
};
Y, tuve que eliminar la imagen pues parece que ya no encuentra esta información:
<template>
<div class="flex-col">
<template>
<div class="flex flex-col sm:flex-row justify-around items-center">
<div class="flex flex-col items-center">
<h1 class="text-5xl">
{{ asset.name }}
<small class="sm:mr-2 text-gray-500">{{ asset.symbol }}</small>
</h1>
</div>
<div class="my-10 flex flex-col">
<ul>
<li class="flex justify-between">
<b class="text-gray-600 mr-10 uppercase">Ranking</b>
<span>#{{ asset.rank }}</span>
</li>
<li class="flex justify-between">
<b class="text-gray-600 mr-10 uppercase">Precio actual</b>
<span>{{ asset.priceUsd | dollar }}</span>
</li>
<li class="flex justify-between">
<b class="text-gray-600 mr-10 uppercase">Precio más bajo</b>
<span>{{ min | dollar }}</span>
</li>
<li class="flex justify-between">
<b class="text-gray-600 mr-10 uppercase">Precio más alto</b>
<span>{{ max | dollar }}</span>
</li>
<li class="flex justify-between">
<b class="text-gray-600 mr-10 uppercase">Precio Promedio</b>
<span>{{ avg | dollar }}</span>
</li>
<li class="flex justify-between">
<b class="text-gray-600 mr-10 uppercase">Variación 24hs</b>
<span>{{ asset.changePercent24Hr | percent }}</span>
</li>
</ul>
</div>
<div class="my-10 sm:mt-0 flex flex-col justify-center text-center">
<button
class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded"
>
Cambiar
</button>
<div class="flex flex-row my-5">
<label class="w-full" for="convertValue">
<input
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"
/>
</label>
</div>
<span class="text-xl"></span>
</div>
</div>
</template>
</div>
</template>
<script>
import api from "@/api";
export default {
name: "CoinDetail",
data() {
return {
asset: {},
history: [],
};
},
computed: {
min() {
return Math.min(
...this.history.map((h) => parseFloat(h.priceUsd).toFixed(2))
);
},
max() {
return Math.max(
...this.history.map((h) => parseFloat(h.priceUsd).toFixed(2))
);
},
avg() {
return (
this.history.reduce((a, b) => a + parseFloat(b.priceUsd), 0) /
this.history.length
);
},
},
created() {
this.getCoin();
},
methods: {
getCoin() {
const id = this.$route.params.id;
Promise.all([api.getAsset(id), api.getAssetHistory(id)]).then(
([asset, history]) => {
this.asset = asset;
this.history = history;
}
);
},
},
};
</script>
<style scoped>
td {
padding: 10px;
text-align: center;
}
</style>
Es posible observar la acción de cambio de rutas?
la navegacion programatica es otra forma que tenemos de crear rutas para navegar en el sitio.
casi me pierdo!!!
alguien sabe por que sucede esto? pero en el navegor funciona bien el error me dio cuando copie el archivo CoinDetail.vue que esta en Archivos y enlaces.
![](
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.