No tienes acceso a esta clase

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

Mejorar la UI con filtros

31/38
Recursos

Aportes 47

Preguntas 4

Ordenar por:

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

o inicia sesi贸n.

Pana el hecho de que te tomes el tiempo para responder las dudas de los estudiantes, dejar links a art矛culos para complementar la ense帽anza sobre las dudas que respondes y dem谩s deja muy bien parado 茅ste curso;
Lo voy a recomendar mucho, hasta ahora muy completo!
Saludos!

Compa帽eros, si est谩n usando la versi贸n 3 de Vue tendr谩n problemas al usar filter ya que este fue removido de esta versi贸n.
Por lo tanto no funcionar谩 que en el archivo main.js usen la funci贸n 鈥檉ilter鈥 ya que esta dejo de ser soportada.

Pero a pesar de eso, a煤n podemos tener los mismos resultados que se muestran en esta clase.
Eso s铆, hay algunas cosas que se hacen diferentes.

鈥> Veamos paso a paso lo que hay que hacer <鈥
PRIMERO
> Ya no haremos uso del archivo main.js, por lo que este archivo no hay que modificarlo. Se deja tal como lo ten铆an.
SEGUNDO
> Tal como se muestra en esta clase deben crear el archivo filters.js en su directorio 鈥檚rc鈥 y agregarle el mismo contenido que pone el profesor.
Incluso usando la librer铆a numeral que descargaron al comienzo de la clase por 鈥榥pm鈥.
TERCERO
> Ahora estando en el archivo PxAssetsTable.vue veremos varias diferencias, ya que es aqu铆 donde simulamos el mismo efecto que ten铆a la funci贸n filter de la versi贸n 2.x de Vue.

> Comencemos viendo como queda la secci贸n <script> de nuestro archivo:
- PxAssetsTable.vue -

> Si observan es aqu铆 donde hacemos la importaci贸n de nuestras funciones que creamos en el archivo filters.js.
> Ahora para acceder a estas funciones debemos usar, dentro de nuestro bloque 鈥榚xport default鈥, la funci贸n setup().
Usando setup() retornaremos las funciones que importamos de nuestro archivo filters.js.
Solo as铆 podremos hacer uso de estas funciones, nuestros 鈥渇iltros鈥, dentro de nuestra secci贸n <template>.

> Por lo que veamos ahora como podemos aplicar est谩s funciones de filters.js en los datos de nuestra tabla.
Vayamos a la secci贸n <template> de nuestro archivo:
- PxAssetsTable.vue -


> Para la columna 鈥橮recio鈥 y 鈥機ap. de Mercado鈥, al igual que en la clase, le aplicamos la funci贸n dollarFilter().
> Y para nuestra columan 鈥榁ariaci贸n 24hs鈥 le aplicamos la funci贸n percentFilter().
> Es de esta forma entonces como usamos nuestras funciones de nuestro archivo 鈥榝ilters.js鈥.
Hacemos un simple llamado de la funci贸n y le pasamos el parametro que espera. <

------------------------

Y bueno, a pesar de ya no poder usar la funci贸n 鈥榝ilter鈥, de esta forma podemos tener los mismos resultados que vimos en esta clase.
Espero les sirva 馃槃, saludos a todos!!

Dos cosas me sorprenden de este curso:

  1. Vue es muy intuitivo. Seguramente el laburo del d铆a a d铆a incremente su complejidad pero los fundamentos son f谩ciles de comprender e iterar sobre ellos.
  2. Nacho explica muy bien y est谩 pendiente de los estudiantes. Veo muchos comentarios suyos aportando m谩s valor 馃憦馃憦馃憦

LOS FILTROS EN VUE 3 YA NO EXISTEN

Seg煤n su documentaci贸n oficial los filtros dentro de VueJS dejaron de existir, en su lugar reecomiendan usar propiedades computadas o m茅todos.

Aqu铆 les dejo el c贸digo para que puedan simular el uso de filtros siguiendo la documentaci贸n de Vue, el archivo main.js ya no se toca, ah铆 ya no hacemos nada, pero en el componente PxAssetsTable.vue hay que agregar importar dollarFilter y hay que agregar el m茅todo, que en este caso lo llame dollar para simular el filtro de la clase, el cual va a devolver lo que la funci贸n dollarFilter devuelva:

import { dollarFilter } from "@/filters";

export default {
  name: "PxAssetsTable",

  props: {
    assets: {
      type: Array,
      default: () => []
    }
  },

  methods: {

    dollar(value) {
      return dollarFilter(value);
    }

  }

};

Y simplemente en el template lo usamos como un m茅todo normal:

<td>{{ dollar(a.priceUsd) }}</td>

Nacho hasta esta clase caigo en cuenta lo bien estructurado que est谩 este curso. Felicidades.

Primero dar una pasada por los componentes b谩sicos y luego ir agregando casos reales con un proyecto productivo te va llevando mucho m谩s r谩pido por los conceptos que necesitas en el d铆a a d铆a.

Cada vez amo m谩s vue.js XD

Los filtros los estuve buscando una vez para mi trabajo y nunca entendi como implementarlos, ahora veo todo con claridad, muchas gracias!!!

Otra manera de evaluar el valor para dar color al porcentaje ser铆a verificando si el n煤mero es mayor o menor a 0.

<td :class="asset.changePercent24Hr > 0 ? 'text-green-600' : 'text-red-600'">
	{{ asset.changePercent24Hr | percent }}
</td>

Otra manera de hacer la validaci贸n del color:

        <td
          :class="
            parseFloat(a.changePercent24Hr) < 0.0
              ? 'text-red-600'
              : 'text-green-600'
          "
        >
          {{ a.changePercent24Hr | percent }}
        </td>

la equivalencia m谩s cercana que puedo ubicar, son los pipes para Angular鈥 馃

Si como yo est谩n en Vue 3 los c贸digos son los siguientes:

filter.js

import numeral from 'numeral'

const filters  =  {
  DollarFilter: value =>   
    value ? numeral(value).format('($ 0.00a)') : '$ 0'
}

export default filters 

en main.js se declara as铆:

import  { createApp } from "vue";
import filters from "@/filters";

const app = createApp(App).use(router)
app.config.globalProperties.$filters = filters
app.mount("#app");

y se declara en el td as铆:

	<td>
          {{ $filters.DollarFilter(a.priceUsd) }}
        </td>

Si alguno de ustedes est谩 haciendo el curso con Vue 3, la funcionalidad de filters ha sido removida.

Si quieren saber c贸mo manejar esta funcionalidad en esta versi贸n podr铆a revisar el siguiente link

El sitio web de NumeralJS: http://numeraljs.com/

Hola pueden escribir sus filtors tambi茅n con ternarios para hacerlos un poco menos verbosos

//filters.js
import numeral from 'numeral'

const dollarFilter = function(value) {
   return value ? numeral(value).format('($ 0.00a') : '$ 0'
}

const percentFilter = function(value) {
   return value ? `${Number(value).toFixed(2)}%` : '0%'
}

export { dollarFilter, percentFilter } 

Otra forma podria ser asi despues de todo lo que hemos visto. 馃槂

<td :class="a.changePercent24Hr < 0 ? 'text-red-600' : 'text-green-600'">

Curioso ver aqui el precio del BTC en los 8k鈥 actualmente 55K 鈥 caramba hombre, q negocio me perdi xD

HOY BTC 59K

Una forma m谩s moderna de escribir filters.js:

import numeral from "numeral";

const dollarFilter = (value) => {
  return !value ? "$ 0" : numeral(value).format("($ 0.00a)");
};

const percentFilter = (value) => {
  return !value ? "0%" : `${Number(value).toFixed(2)}%`;
};

export { dollarFilter, percentFilter };

ejemplo seria como un pipe si fuese Angular 驴?

Si estas usando Vue3:
In 3.x, filters are removed and no longer supported. Instead, we recommend replacing them with method calls or computed properties.

Esto de los filtros es muy parecido a los pipes de Angular, sin embargo los de Vue me gustan m谩s!

Vue.js le permite definir filtros que pueden usarse para aplicar formato de texto com煤n. Se puede utilizar filtros en dos lugares: interpolaciones mustache y expresiones v-bind. Los filtros se deben agregar al final de la expresi贸n de JavaScript, denotados por s铆mbolo 鈥減ipe鈥:

<!-- en mustaches -->
{{ message | capitalize }}

<!-- en v-bind -->
<div v-bind:id="rawId | formatId"></div>

main.js

import { createApp } from 鈥渧ue鈥;
import App from 鈥./App.vue鈥;
import 鈥淍/assets/css/tailwind.css鈥;
import router from 鈥淍/router.js鈥;
import { dollarFilter } from 鈥淍/filters.js鈥

const app = createApp(App)
.use(router)

app.config.globalProperties.$filters = {
dollarFilter
}

app.mount("#app");

PxAssetsTable

{{ $filters.dollarFilter(asset.priceUsd) }}

Este es el unico cambio para que quede de maneta global

La funcionalidad de los filters ha quedado deprecada. El equipo de Vue.js recomienda usar metodos o propiedades computadas para el uso de los mismos.
.
https://v3.vuejs.org/guide/migration/filters.html#overview

Que m谩gico:)

Por si a alguien no le funciona la librer铆a, pueden hacerlo de esta forma, no es lo idea, y no tiene que ver con el tema, pero soluciona el problema:

para los dos primeros:

            <td>$ {{ Math.round(a.priceUsd * 100) / 100 }}</td>
            <td>$ {{ Math.round(a.marketCapUsd * 100) / 100 }}</td>

para el ultimo valor:

        methods: {
            percentFilter(value){
                if (!value) {
                    return 0;
                }
                return `${Number(value).toFixed(2)}%`
            }
        }

<td :class="a.changePercent24Hr.includes('-') ? 'text-red-600' : 'text-green-500'">
                {{ percentFilter(a.changePercent24Hr) }}
</td>

Podemos exportar directamente al crear la funci贸n

import numeral from "numeral"

export const dollarFilter = (value) => {
    if(!value) return "$ 0"
    return numeral(value).format(("$ 0.00a"))
}

export const percentFilter = (value) => {
    if(!value) return "0%"
    return `${Number(value).toFixed(2)}%`
}

Este es el doc de vue 2 donde se explica los filtros https://vuejs.org/v2/guide/filters.html

T谩mbien Podemos usar Intl.NumberFormat de JavaScript.

<td>{{ new Intl.NumberFormat("es-CO").format(a.priceUsd) }}</td>
  1. instalar libreria-> npm i -S numeral
  2. crear filter.js
import numeral from 'numeral'

const dollarFilter = function(value) {
  if (!value) {
    return '$ 0'
  }

  return numeral(value).format('($ 0.00a)')
}

const percentFilter = function(value) {
  if (!value) {
    return '0%'
  }

  return `${Number(value).toFixed(2)}%`
}

export { dollarFilter, percentFilter }

3.en main js

import { dollarFilter, percentFilter } from '@/filters'

Vue.filter('dollar', dollarFilter)
Vue.filter('percent', percentFilter)

4.hacer uso en PxAssetsTable.vue

<td>{{ a.priceUsd | dollar }}</td>
        <td>{{ a.marketCapUsd | dollar }}</td>
{{ a.changePercent24Hr | percent }}

con los filtros mi valor incial se manteniene igual

no entendi muy bien por que pones export defauld y tampoco por que cuando importas al archivo main.js en el import lo pones con llaves {dollarFilter}

<v-content>
  <router-view/>
</v-content>

Filtros:

Utilidad de Vue.js que nos permite modificar el valor de la vista de una propiedad sin modificar el valor de la propiedad.
Permite formatear alg煤n valor para mostrar en la interfaz de usuario.

una pregunta por que la funcion que retornaba la API la exportabas con export default y al filtro con export? cual es la diferencia?

casi dormido

export default {
  name: "PxAssetsTable",
  methods:{
    getClassName(value)
    {
      let className = "";
      
      if(value > 0)
      {
        className = "text-success";
      }
      else if (value < 0)
      {
        className = "text-danger";
      } 
      else
      {
        className = "text-dark";
      }

      return className;
    }
  },
  props: {
    assets: {
      type: Array,
      default: () => []
    }
  }
};

la magia de prettier

Filtros: Son una utilidad que nos da Vue con la que podemos modificar el valor de una vista de una propiedad sin modificar el valor de la propiedad, es decir, dentro de la aplicaci贸n el valor de la propiedad no va a cambiar pero al momento de mostrarse en pantalla va a tener una adaptaci贸n a ese valor seg煤n el formato que se le quiera dar.

Estoy haciendo este curso en marzo del 2021, los resultados que arroja el Cap. de mercado a esta fecha en el bitcoin se ha multiplicado enormemente! Los invito a tomar los cursos de trading, no tienen desperdicio!

y pensar que ahora el bitcoin esta en 51k 馃槓

La funci贸n includes me pareci贸 bastante interesante !!

馃憣

Wow. La forma de programar en Vue es muy intuitiva. Estoy chocando un poco porque ya mi mente est谩 demasiado adaptada a React, pero me ha parecido fascinante este framework 鉂わ笍

Me llama la atencion que al final se haya decidido utilizar includes() para identificar si le numero es negativo, tratandolo como string.
Segun veo changePercent24Hr es numerico y es posible solo checar si es mayor que cero para determinar el color:

<td :class="c.changePercent24Hr > 0 ? 'text-green-600' : 'text-red-600'">
          {{c.changePercent24Hr | percent}}
        </td>